localStorage时效性

如何设计一个localStorage，保证数据的时效性？

localStorage
HTML5的本地存储API中的localStorage与sessionStorage在使用方法上是相同的，区别在于sessionStorage在关闭页面后即被清空，而localStorage则会一致保存。
localStorage是HTML5本地存储的API，使用键值对的方式进行存取数据，存取的数据只能是字符串。

• 存储方式：以键值对（Key-value）的方式进行存取数据，存取的数据只能是字符串
• 主要应用：购物车、客户登录、游戏存档…
• 可存储的数据类型：数组，图片，json，样式脚本…（只要是能序列化成字符串的内容都可以存储）

localStorage的好处就是，存储空间大，长时间保存，同一浏览器，标签页全部共享。不好的地方就是永久有效，除非手动清除。所以如果有数据时效性的需求，就需要自己来处理下，可以和数据一起存易data时间戳。

实现一：

const set = (key, value) => {
    const curTime = new Date().getTime();
    Window.localStorage.setItem(key, JSON.stringify({ data: value, time: curTime }));

};
const get = (key, exp) => {
    const localData = localStorage.getItem(key);
    const localDataObj = JSON.parse(localData);
    const nowTime = new Date().getTime();
    if (nowTime - localDataObj.time > exp) {
        console.log("数据已过期");
        //删除
        localStorage.removeItem(key);
        return false;
    } else {
        const data = JSON.parse(localDataObj.data);
        return data;
    }
};
const value = '{"name":"yd"}';
set("info", value)
get("info", 1000)
get("info", 1000 * 60 * 60)

标签：存储,const,value,localStorage,key,时效性,data
来源： https://blog.csdn.net/weixin_39233022/article/details/112250494