H5本地存储：sessionStorage和localStorage

Posted 2021-02-21 10manongit

作者：心叶
时间：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：字符串类型，表示触发这个事件的页面地址。