面试官问:怎么让localStorage像cookie那样有过期时间

思路

昨天被面试官问到时有点蒙,今天考察了一下,l利用封装的思想,只用在设置一个key的是再携带设置另一个时间key,另一个key为你想设置的它的最大生命周期就可以了。获取的时候比较一下这个时间key,如果过期了就remove,获取不到

实现

需要自定义set和get方法

自定义set()

    function set(key, value, expired) {
      // 设置好要存储的值
      console.log(key, value);
      localStorage.setItem(JSON.stringify(key), JSON.stringify(value))

      //根据设置好存储值的key 再在localStorage设置另一个关联它的最大生存时间
      if (expired) {
        localStorage.setItem(`${key}__expires__`, Date.now() + 1000 * 60 * expired)
      }
      return value
    }

    set('key', 'wangfeng', 0.1)

运行了一下
在这里插入图片描述

自定义get()

    function get(key) {
      // 取出当前key的最大生存周期时间
      let expired = localStorage.getItem(`${key}__expires__`) || Date.now() + 1

      // 比较当前时间是否过期
      let now = Date.now()
      if (now > expired) {
        localStorage.removeItem(JSON.stringify(key))
        localStorage.removeItem(`${key}__expires__`)
        return
      }
      return localStorage.getItem(JSON.stringify(key)) ? JSON.parse(localStorage.getItem(JSON.stringify(key))) : localStorage.getItem(JSON.stringify(key))

    }


    console.log(get('key'));

运行:
上面最大生存时间我 设置是 0.1 分钟
超过时间了 获取不到了,
在这里插入图片描述
在这里插入图片描述

参考:https://segmentfault.com/a/1190000016892019

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值