HTML5-localStorage 本地存储

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

localStorage - 本地存储，没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储，默认浏览器关闭后消失

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

HTML5 使用 JavaScript 来存储和访问数据。

[b]1、什么是localStorage[/b]

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

[b]2、如何使用localStorage[/b]

localStorage的浏览器支持情况：



localStorage有三种设置值的方法：

<script>
var storage=window.localStorage;
//
//写入a、b、c字段
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//获取a、b、c字段对应的value值
console.log("a: "+storage["a"]);
console.log("b: "+storage.b);
console.log("c: "+storage.getItem("c"));
</script>

localStorage只支持string类型的存储,即使存储的是int类型，也会转换成string类型；

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取；

localStorage的删、改：

<script>
var storage=window.localStorage;
//
//写入a、b、c字段
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//将localStorage的内容全部清除：
storage.clear();
//根据Key移除对应的localStorage：
storage.removeItem("a");
storage.removeItem("b");
//localStorage的键获取
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
</script>

在使用localStorage存储json对象时，可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

<script>
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
</script>

使用JSON.parse()方法，将json字符串转换为json对象：

var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

sessionStorage的使用和localStorage的使用是一样的；