使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。Web Storage的两个主要目标是:
- 提供一种在cookie之外存储会话数据的途径。
- 提供一种存储大量可以跨会话存在的数据的机制。
Web Storage又分为两种: sessionStorage 和localStorage ,即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地; 不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
1、sessionStorage对象
sessionStorage对象存储特定于某个对话的数据,也就是它的生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可以可用(注意:Firefox和Weblit都支持,IE则不行)。
因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制。
接下来写一个简单的例子说明说如何使用的。
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>HTML5--Web存储SessionStorage</title>
<script type="text/javascript">
window.onload = function()
{
alert("当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,将不会显示任何数据,刷新页面无效。\r\n由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。")
//首先获得body中的3个input元素
var msg = document.getElementById("msg");
var getData = document.getElementById("getData");
var setData = document.getElementById("setData");
setData.onclick = function()//存入数据
{
if(msg.value) {
sessionStorage.setItem("data", msg.value);
alert("信息已保存到data字段中");
} else {
alert("信息不能为空");
}
};
getData.onclick = function()//获取数据
{
var msg = sessionStorage.getItem("data");
if(msg) {
alert("data字段中的值为:" + msg);
} else {
alert("data字段无值!");
}
}
}
</script>
</head>
<body>
<input id="msg" type="text" placeholder="请输入要保存的数据"/>
<input id="setData" type="button" value="保存数据"/>
<input id="getData" type="button" value="获取数据"/>
</body>
</html>
效果:
注意:
当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据,将不会显示任何数据,刷新页面无效。由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。
不同浏览器写入数据方法略有不同。Firefox和Webkit实现了同步写入,所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据,所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。
我们还可以通过结合length属性和key()方法来迭代sessionStorage中的值。首先是通过key()方法获取指定位置上的名字,然后再通过getItem()方法找出对应名字的值。
我同样写一个例子。
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5 Web Storage</title>
<style>
.box{
width:320px;
border: 1px solid #000000;
padding: 10px 10px;
}
.text{
margin-top:5px;
margin-bottom:5px;
width: 200px;
height: 20px;
}
.addBtn,.searchBtn,.loadBtn{
border: 1px solid #00A2E9;
background-color: #66d3ff;
padding: 5px 10px;
font-size: 14px;
}
#list{
background-color:#8ad6ff;
display: none;
margin-top: 10px;
}
td,tr{
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<form id="myForm">
<!--姓名-->
<label for="userName">姓 名:</label>
<input type="text" id="userName" name="userName" class="text"/><br/>
<!--手机号码-->
<label for="mobilephone">手机号码:</label>
<input type="text" id="mobilephone" name="mobilephone" class="text"/><br/>
<input class="addBtn" type="button" οnclick="save()" value="新增记录"/>
</form>
<!--查找机主-->
<hr/>
<label for="search_phone">输入手机号:</label>
<input type="text" id="search_phone" name="search_phone" class="text"/>
<input class="searchBtn" type="button" οnclick="find()" value="查找机主"/>
<p id="find_result"><br/></p>
<!--显示所有的信息-->
<input type="button" οnclick="loadAll()" value="显示所有的信息" class="loadBtn">
<div id ="list"></div>
</div>
</body>
<script>
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var userName = document.getElementById("userName").value;
var myForm = document.getElementById("myForm");
sessionStorage.setItem(mobilephone,userName);
myForm.reset();
}
//查找数据
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = sessionStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的机主是:" + name;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(sessionStorage.length>0){
list.style.display="block";
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手机号码</td></tr>";
for(var i=0;i<sessionStorage.length;i++){
var mobilephone = sessionStorage.key(i);
var name = sessionStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空,赶紧开始加入联系人吧";
}
}
</script>
</html>
效果:
除了使用案例中的遍历方法之外,也可以使用for-in循环来迭代sessionStorage中的值:
for(var key in sessionStorage){
var value = sessionStorage.getItem(key);
console.log(key + "=" + value);
}
2、localStorage 对象
localStorage一直将数据保存在客户端本地。localStorage 和sessionStorage的用法相似,这里就不做详细的说明。