localStorage和sessionStorage

他们都是存储客户端临时信息的对象，只能存储字符串类型的对象,存放数据大小一般为5MB。，不同浏览器无法共享他们的信息，但相同浏览器的不同页面可以共享相同的localStorage(页面属于相同域名和端口)，不同的页面或标签无法共享sessionStorage的信息。

localStorage(本地存储)

localStorage生命周期是永久，如果不清除这些信息将永远存在。

方法

// 存储
localStorage.setItem(id, string);
// 取
localStorage.getItem(id);
// 删除
localStorage.remove(id);
// 清空
localStorage.clear();

localStorege的定时清除

对比起来，localStorage比sessionStorage更能满足长期存储需求，但其长久存在的特性容易造成存储废弃数据过多，且容易造成不必要的误会，所以我们可以对localStorage进行定时清除。由于其本身没有定时清除的方法，所以我们只能自己写。

思路：将存储数据、存储时间、过期时间转换成字符串一起存储，当获取数据时判断数据是否过期，如果没有过期就成功获取，过期则清除该项。

代码

// 定义储存的方法
Storage.prototype.setExpire=(key, value, expire) => {
    const object={
        data: value,
        time: Date.now(), //当前时间戳
        expire:expire // 过期时间
    };
    localStorage.setItem(key, JSON.stringify(object));
}
// 定义获取的方法
Storage.prototype.getExpire=key => {
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.remove(key);
        return null;
    }
    return val.data;
}

使用定义的方法：

// 存储
localStorage.setExpire('token', 'xxxxxx', 5000);
// 取
localStorage.getExpire('token');

sessionStorage(会话存储)

sessionStorage生命周期为当前窗口或标签，一旦窗口或标签被关闭，信息就会被清空

方法

// 存储
sessionStorage.setItem(id, string);
// 取
sessionStorage.getItem(id);
// 删除
sessionStorage.remove(id);
// 清空
sessionStorage.clear();
// 计算长度
sessionStorage.length();

我更喜欢sessionStorage结合vuex，保证页面刷新store里的数据仍然存在

// 在刷新前将vuex里的数据保存在sessionStorage里
window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('store', JSON.stringify(this.$store.state));
})

// 页面加载时读取sessionStorage里的状态
if (sessionStorage.getItem('store')) {
    this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}