温故知新（八七）如何封装一个 localStorage，保证数据的时效性

如何封装一个 localStorage，保证数据的时效性

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

localStorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
localStorage 是 HTML5 本地存储的 API ，使用键值对的方式进行存储数据，存取的数据只能是字符串。
存储方式：以键值对的方式存储字符串
主要应用：购物车、客户登录、游戏存档等
可存储的数据类型：数组，图片，json，样式，脚本等（只要能序列化成字符串的内容都可以存储）
localStorage 的好处就是，存储空间大，长时间保存，不好的地方就是永久有效，除非手动清除。所以如果有数据时效性的需求，就需要自己来处理下，可以和数据一起存一个 expires 时间戳。

let timeLocalStorage = {
    set:function(key,value,expires){
        let data = {value,expires:Date.now()+new Date(expires).getTime()};
        localStorage.setItem(key,JSON.stringify(data));
    },
    get:function(key){
        let data = JSON.parse(localStorage.getItem(key));
        if(data){
            if(data.expires && Date.now() - data.expires > 0){
                console.log('数据已过期');
                localStorage.removeItem(key);
            }else{
                return data.value;
            }
        }
        return null;
    },
    removeItem:function(key){
        localStorage.removeItem(key);
    }
}