js数据存储2：Storage

Web Storage作用：

• 除cookie以外的存储手段
• 可存储大量跨会话的数据
• 目前分为sessionStorage和localStorage

sessionStorage

sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。

• 可以使用 setItem()或者直接设置新的属性来存储数据（tips：存储对象的话可以先JSON.stringify，读取的时候再JSON.parse）（大多数浏览器是同步写入，而IE是异步写入,ie8可以强制同步写入）:

    sessionStorage.setItem('name','panda');
    sessionStorage.singer = "Jay";

• 可以使用 getItem()或者通过直接访问属性名来获取数据

    var name = sessionStorage.getItem("name");
    var singer = sessionStorage.singer;

• 可以通过key()方法和length属性遍历所有的值

    var key,value;
    for(var i=0,len=sessionStorage.length;i<len;i++){
        key = sessionStorage.key(i);
        value = sessionStorage.getItem(key);
        console.log(key + ':' + value);
    }

• 从sessionStorage中删除数据:可以使用 delete 操作符删除对象属性,也可调用 removeItem()方法(建议使用方法，delete可能在部分浏览器中不生效)

    delete sessionStorage.name;
    sessionStorage.removeItem("singer");

• clear()方法:删除所有的存储

 sessionStorage.clear();

localStorage

与sessionStorage的区别就是保存期限，保存期限是直到被用户删除缓存

• 如果为了兼容不支持localStorage的浏览器,可以这样写

    function getLocalStorage(){
        if (typeof localStorage == "object"){
            return localStorage;
        } else if (typeof globalStorage == "object"){
            return globalStorage[location.host];
        } else {
            throw new Error("Local storage not available.");
        }
    }
    var storage = getLocalStorage();

storage事件

• 对Storage对象进行任何修改，都会在文档上触发storage事件:setItem/removeItem/clear等等
• 该事件的event对象有以下属性:①domain:域名，②key:键名，③newValue:设置的新值或null，④oldValue:旧值
• 注意的是：在修改Storage对象的页面上注册监听是不行的，需要是同源的2个，如：A页面修改，B页面监听（而ie特殊，在所有页面都会有响应到）
• 建议：可以自己自定义方法去监听修改事件

    window.addEventListener("storage", function (e) {
        console.log(e);
    });

限制

对于每个来源浏览器一般都有存储空间大小的限制：

• localStorage:Chrome和Safari限制2.5MB，而iOS版Safari和Android版WebKit的限制也是2.5MB
• sessionStorage:有的浏览器对sessionStorage的大小没有限制，但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit限制2.5MB，IE8+和 Opera限制是5MB