使用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);
如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。
-
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>
-
localStorage对象
这个本地测试好像有问题，特别是火狐浏览器，本地测试关掉浏览器数据就被清空了，谷歌浏览器使用127.0.0.1访问本地也不行，但使用localhost访问是可以的，表示很无语。
网友评论