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