HTML5客户端数据存储

HTML5 使在不影响网站性能的情况下存储大量数据成为可能。之前，这些都是由 cookie 完成的，cookie不适合大量数据的存储，因为会影响速度。

举个例子：

var obj = {x:1};
//例1
localStorage.obj = obj;//不能直接存储非字符串类型
alert(localStorage.obj.x);//undefined
localStorage.obj = JSON.stringify(obj);//转化为字符串后存储
//例2
JSON.parse(localStorage.obj).x = 2;//只获取到存储对象的副本，设置了副本的属性值，之后该副本废弃，真正的存储对象保持不变
//JSON.parse(localStorage.getItem("obj")).x = 2;//同上
alert(JSON.parse(localStorage.obj).x);//1
//例3
obj.x=3;
localStorage.obj = JSON.stringify(obj);
alert(JSON.parse(localStorage.obj).x);//3

HTML5 提供了两种在客户端存储数据的方法：

1、localStorage : 存储的数据没有时间限制

第二天、第二周或下一年之后，数据依然可用。

//下面的例子对用户访问页面的次数进行计数
<script type="text/javascript">
if (localStorage.pagecount)
{
  localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
  localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

2、sessionStorage : 针对一个 session 进行数据存储

当用户关闭浏览器窗口后，数据会被删除。

//下面的例子对用户在当前 session 中访问页面的次数进行计数
<script type="text/javascript">
if (sessionStorage.pagecount)
{
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
  sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

使用详解

首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

需要注意的是，HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。