面试官问:怎么让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)

运行了一下
面试官问:怎么让localStorage像cookie那样有过期时间_第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 分钟
超过时间了 获取不到了,
面试官问:怎么让localStorage像cookie那样有过期时间_第2张图片
面试官问:怎么让localStorage像cookie那样有过期时间_第3张图片

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

你可能感兴趣的:(面试官问你,前端天天面试题积累)