HTML5API___Web Storage

时间:2023-03-09 16:56:25
HTML5API___Web Storage

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 页面 看看另外一个页面的响应