Web Storage 是html5的本地存储规范
支持:移动平台基本支持 (opera mini除外) ie8+ff chrome 等 支持
它包含2个:
sessionStorage 会话存储 停留期: 会话期间 关闭网页之前
localStorage 本地存储 停留期:删除之前 改变之前 都存在本地。
因为sessionStorage 与localStorage 都继承于 Web Strogage。 他们的一些属性跟方法都一致。
//判断浏览器支持情况
if(window.sessionStorage){ }
if(window.localStorage){ }
以localStorage 为例:
/**
* 属性: length
* 方法: getItem(key)
* setItem(key,value)
* removeItem(key) 删除某一个
* clear() 清除所有的
* key(index) 获取本地存储的第index个的value
*/
//注意存储的是字符窜。json格式 通过JSON.stringify 来转化成字符串。
// 同样 取出来的值也是字符串 通过 JSON.parse 来转化成 json数据; var data={
name:"aa",
age:"25",
job:'f2e',
test:'test'
} ;
localStorage.clear();
localStorage.setItem('User',JSON.stringify(data)); // var user_data = JSON.parse(localStorage.getItem('User')); //console.log(user_data); //Object {name: "aa", age: "25", job: "f2e"}
浏览器有个 stroage事件 可以监听。
window.addEventListener('storage',function(e){ console.log(e) },false);
不过比较不同的是 storage 事件不是监听本页面,而是监听本域上其它页面对localStorage的更改。
示例:http://yueyao.github.io/project/test/pages/local2.html
http://yueyao.github.io/project/test/pages/local1.html
尝试点击1 或者2 页面 看看另外一个页面的响应