html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用：

与cookie相比，webStorage有很多优势（如本文结尾），所以在选择的时候，优先选择webStorage！

sessionStorage使用方法完全同localStorage一致，不同之处：

localStorage:没有时间限制的数据存储,类似于cookie，一直存在，直到用户清除数据；

sessionStorage只针对一个 session 的数据存储，关闭当前网页/窗口就会消失；

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // console.log('支持');

    //增
        //数字
    localStorage.setItem("age",28);
        //字符串
    localStorage.setItem('name','guo');
    localStorage.setItem('lastname','jayson');
        //数组
    localStorage.setItem('skills',['html','js','css']);
    //或者使用如下方式增/改/查
    // var name='guo';
    // localStorage.name=name;
    // var lsName=localStorage.name;
    //删
    localStorage.removeItem('name');
    // localStorage.clear();
    //改
    localStorage.setItem('age',29);
    //查
    var lsAge=localStorage.getItem("age");
    var lsLastname=localStorage.getItem("lastname");
    //遍历所有的item
    for(var i=0;i<localStorage.length;i++){
        var lsName=localStorage.key(i);
        var lsValue=localStorage.getItem(lsName);
        // console.log(lsValue);
    }

    //存储对象（集合）的处理
    var o = {
        // x:1,
        // y:2
        name:'jayson',
        age:27
    };
    var oStr = JSON.stringify(o);	//由于存储的内容都是字符串，序列化对象
    localStorage.setItem("o",oStr);
    localStorage.getItem("o");	//{"x":1} 	typeof类型：string
    var one=JSON.parse(localStorage.getItem("o")).name;	//反序列化
    var two=JSON.parse(localStorage.getItem("o")).age;
    // console.log(one);
    // console.log(two);

    // 识别使用哪种存储机制
    var memory = window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new CookieStorage();
    // 然后在对应机制中获取数据
    var memName=memory.getItem("name");
    // console.log(memName);

} else {
    // 抱歉! 不支持 web 存储。
    console.log('不支持');
}

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。