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
来源: http://www.jianshu.com/p/f096598c1b80