H5本地存储：sessionStorage和localStorage

做者：心叶
时间：2018-05-01 18:30

H5提供了二种很是好用的本地存储方法：sessionStorage和localStorage，下面分别介绍一下：

1.sessionStorage：保存的是一个会话的数据，也就是说只在一次会话中有效，关闭就会销毁数据，不是持久的本地数据存储，只是一个会话的存储；

2.localStorage：本地数据持久化存储，在操做上和第一种没有什么区别，只是存储时间上不一样。

第一步：基本操做。

1.把value存储到key字段：.setItem( key, value)。

sessionStorage.setItem("key", "value");

localStorage.setItem("key", "value");

2.获取指定key本地存储的值：.getItem(key)。

var value=sessionStorage.getItem("key");

var value=localStorage.getItem("key");

3.删除指定key本地存储的值：.removeItem( key)。

sessionStorage.removeItem("key");

localStorage.removeItem("key");

4.清除全部的key/value：.clear()。

sessionStorage.clear();

localStorage.clear();

第二步：其它操做。

storage除了能够用上面说到的方法获取和存储数据，还能够和普通的对象同样，使用点操做和[]来控制数据（下面以localStorage为例子）：

var storage = window.localStorage;

storage.info='经过点设置数据';

//经过[]获取数据
var infoValue=storage['info'];

能够经过storage的key()和length实现数据的遍历：

var storage = window.localStorage;

for (var i = 0, len = storage.length; i < len; i++) {

    var key = storage.key(i);
    
    var value = storage.getItem(key);
    
    console.log(key + "=" + value);

}

第三步：storage事件（针对localStorage）。

localStorage提供了一个事件storage，当键值改变或者clear的时候，就能够触发storage事件（注册storage和改变值要在不跨域的状况下存在于二个页面），以下面的例子：

//页面A.html里面的js代码（为了简化代码，注册事件没有考虑兼容性）
window.addEventListener("storage", function (event) {

    alert(event.newValue);
    
});

//页面B.html里面的js代码
localStorage.clear();

localStorage.setItem('key', 'value');

把页面A.html和B.html放正同一个域名下的HTTP服务器里，先打开A.html页面，再打开B.html页面，就能够看见效果了。

上面A.html注册事件的event对象一共有下面几个属性：

1.key：字符串类型，表示被修改，删除或添加的条目的key值；

2.oldValue：表示以前的值，若是是添加一个条目就返回null；

3.newValue：表示如今的新值，若是是添加一个条目就返回null；

4.url/uri：字符串类型，表示触发这个事件的页面地址。