给localStorage设置过期时间-Toy模板网

这篇具有很好参考价值的文章主要介绍了给localStorage设置过期时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

登录成功了之后后端会返回给我一个token，一般情况下我会将这个token存到localStorage中，后续再每一次请求中都会将这个token携带在请求头中。至于为什么要存到localStorage中呢，相信做过单页web应用的开发者们也知道，如果不存着，那用户刷新了就啥都没有了。

浏览器给我们提供了两个存储方案，一个是localStorage，一个是sessionStorage。存到localStorage中的信息是永久存储,如果用户不手动删除或者代码中没有localStorage.removeItem(xxx)这样的调用那这个信息将永远不会消失; 在sessionStorage中存储的信息则是一次性的，用户关掉网页了下一次在进入这个网页信息就不会再存储了。但是在实际项目的运用中，这两个方案的表现都不是那么令人满意。就比如说，我想要实现用户登录之后七天之内不需要再次登录这样的功能，token生成了之后，后端设置了这个token的过期时间为7天，ok，传到前端，但是针对浏览器目前提供的存储方案，我却只能选择永久存储和一次性存储。一次性存储肯定是不能满足需求的，永久存储也违背了我的意愿。

解决方案：

在localStorage中维护一份{key, expire}的表，并且重写localStorage的api，在setItem的时候设置expire，在getItem的时候，先判断expire与Date.now()的大小

重写setItem

首先有三个参数 key、value、expired ，分别对应键、值、过期时间，

过期时间的单位可以自由发挥，小时、分钟、天都可以，

注意点：存储的值可能是数组/对象，不能直接存储，需要转换 JSON.stringify，

这个时间如何设置呢？在这个值存入的时候在键(key)的基础上扩展一个字段，如：key+'expires'，而它的值为当前时间戳 + expired过期时间


set(key, value, expired) {
    /*
    * set 存储方法
    * @ param {String}     key 键
    * @ param {String}     value 值，
    * @ param {String}     expired 过期时间，以分钟为单位，非必须
    * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
    */
    let source = this.source;
    source[key] = JSON.stringify(value);
    if (expired){
        source[`${key}__expires__`] = Date.now() + 1000*60*expired
    };
    return value;
}

2.重写getItem

获取数据时，先判断之前存储的时间有效期，与当前的时间进行对比；

但存储时expired为非必须参数，所以默认为当前时间+1，即长期有效；

如果存储时有设置过期时间，且在获取的时候发现已经小于当前时间戳，则执行删除操作，并返回空值；

注意点：存储的值可能是数组/对象，取出后不能直接返回，需要转换 JSON.parse文章来源地址https://www.toymoban.com/news/detail-467752.html

get(key) {
    /*
    * get 获取方法
    * @ param {String}     key 键
    * @ param {String}     expired 存储时为非必须字段，所以有可能取不到，默认为 Date.now+1
    * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
    */
    const source = this.source,
    expired = source[`${key}__expires__`]||Date.now+1;
    const now = Date.now();

    if ( now >= expired ) {
        this.remove(key);
        return;
    }
    const value = source[key] ? JSON.parse(source[key]) : source[key];
    return value;
}

到了这里，关于给localStorage设置过期时间的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！