1. 本地存储Storage

作用：永久保存数据数据，下次打开网页的时候数据还在

Storage API 

setItem(): 

- 设置数据，keyvalue类型，类型都是字符串 

- 可以用获取属性的形式操作 

 

getItem(): 

- 获取数据，通过key来获取到相应的value 

 

removeItem(): 

- 删除数据，通过key来删除相应的value 

 

clear(): 

- 删除全部存储的值 

例子 :  保存注册信息  

 

存储事件: 

- 当数据有修改或删除的情况下，就会触发storage事件 

- 在对数据进行改变的窗口对象上是不会触发的 （在当前页面的事件不会触发，共享的页面会触发，多个嵌套的页面）

- Key : 修改或删除的key值，如果调用clear(),key为null 

- newValue  :  新设置的值，如果调用removeStorage(),key为null 

- oldValue :  调用改变前的value值 

- storageArea : 当前的storage对象 url :  触发该脚本变化的文档的

- url  :  触发该脚本变化的文档的url

- 注：session同窗口才可以  例子：iframe操作（嵌套的页面也可以触发storage事件）

 

例子：iframe操作 例子 :   同步购物车（可同步更新，打开新页面，能把旧页面的数据更新过来）

  

 

多选框同步：

html

<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />

javascript

 var aInput = document.getElementsByTagName('input');

    for (var i = 0;i < aInput.length; i++) {
        aInput[i].onclick = function() {
            if (this.checked) {
                window.localStorage.setItem('sel', this.value);
            }
            else{
                window.localStorage.setItem('onSel', this.value);
            }
        };
    }


    window.addEventListener('storage', function(ev) {  //当前页面的事件不会触发（触发的事件不会在当前页面发生，在共享的页面触发）
        if (ev.key == 'sel') {
            for(var i=0;i<aInput.length;i++){
                if (ev.newValue == aInput[i].value) {
                    aInput[i].checked = true;
                }
            }
        } else if (ev.key == 'onSel') {
            for(var i=0; i < aInput.length; i++){
                if (ev.newValue == aInput[i].value) {
                    aInput[i].checked = false;
                }
            }
        }
    },false);

此处checkbox有个bug，某个选项选中->取消->再选中时，不会触发storage事件