HTML5-localStorage 本地存储

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

• localStorage - 本地存储，没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储，默认浏览器关闭后消失

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
HTML5 使用 JavaScript 来存储和访问数据。

1、什么是localStorage

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

2、如何使用localStorage

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的使用是一样的；