会过期的localstorage

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

问题

如何创建一个会过期的localstorage?

分析

localstorage是不会过期的，一旦它保存下来之后，将一直可见，除非你自己手动去删除。

基本思路： （1）封装函数在保存数据时，指定有效时间，把数据和这个有效时间一起保存起来。 （2）封装函数在获取数据时，不着急直接给出结果，而是检查之前保存的有效时间是否过期，如果在就返回数据，否则就删除数据，并返回false。

核心代码

// key: 属性名
// value: 要保存的值
// availabletime: 有效时间，毫秒为单位
const setItem = (key, value,availabletime = 1000*60*60*24) => {
    // 最晚这时间点
    const t = new Date().getTime() + availabletime;
    localStorage.setItem(key, JSON.stringify({ data: value, time: t }));
}

// 获取数据
const getItem = (key) => {
    // 去初始值
    const localData = localStorage.getItem(key);
    const localDataObj = JSON.parse(localData);
    if (Date.now() > localDataObj.time) {
        // console.log("数据已过期");
        //删除
        localStorage.removeItem(key);
        return false;
    } else {
        // 返回真正的数据
        return JSON.parse(localDataObj.data);
    }
};

测试

setItem('aa',100,2000)

getItem('aa') // 2秒之内是可以取到值的
// 2秒之后
getItem('aa') // false,不仅取不到值，原来保存的数据真的删除了。唉~

进一步优化

1. 容错处理。上面的并没有考虑getItem('不存在的属性名')的情况。
2. 逻辑。

• 取一个过期了的数据，是要返回false，还是抛出异常？这些都是可以进一步确定的。
• 是否进一步支持设置（或者获取）成功的回调函数，让用户可以做一些后续的操作。

3. 封装。上面的代码就是两个独立的函数，并没有封装成对象，或者class，或者IIFE挂载到window上。
4. 参数。目前就支持毫秒的单位，也可以进一步拓展成支持自定义的时间，例如：小时，天，月等等。