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

Now or nerver .
原文地址:https://www.cnblogs.com/iyueyao/p/3313637.html