localStorage存储时间

一、关于localStotage

众所周知本地存储三巨头:cookie、localStorage、sessionStorage

1、cookie空间太小(cookie中每条cookie的存储空间为4k)，只适合存一些登录会话信息

2、sessionStorage的过期时间是关闭浏览器，是个临时会话窗口

3、localStorage它解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它能长时间保存，同一浏览器，标签页全部共享，是直接存到电脑硬盘上的

4、localStorage只能存储字符串格式的数据，存储时把数据转换成json格式，取出的时候再转换回来。

二、localStorage存在时间

localStorage默认是没有过期时间的，就算关掉浏览器也会存在，除非、清除浏览器缓存或手动删除，但在某些场景下我们想自动清除某些缓存该怎么办呢？封装一下，让它可以设置失效时间

三、设置localStorage的过期时间

思路：重写localStorage的get和set方法，在set的时候加入时间戳对象，get的时候取出这个对象，判断时间戳即可(存值时间戳 + 有效时间戳 = 过期时间戳)

在js中：

// 存值函数
// 接收三个参数：键、值、有效天数
Storage.prototype.setCanExpireLocal = (key, value, expire) => {
// 判断传入的有效期是否为数值或有效
// isNaN是js的内置函数，用于判断一个值是否为NaN（非数值），
// 非数值返回true，数值返回false
// 还可以限制一下有效期为整数，这里就不做了
  if (isNaN(expire) || expire < 1) {
    console.error('有效期应为一个有效数值');
    return;
  }
  // 86_400_000一天时间的毫秒数，_是数值分隔符
  const time = expire * 86_400_000;
  const obj = {
    data: value, // 存储值
    time: Date.now(), // 存值时间戳
    expire: time // 过期时间
  };
  // 注意，localStorage不能直接存储对象类型，sessionStorage也一样
  // 需要先用JSON.stringify()将其转换成字符串，取值时再通过JSON.parse()转换回来
  localStorage.setItem(key, JSON.stringify(obj));
};



// 取值函数
// 接收一个参数，存值的键
Storage.prototype.getCanExpireLocal = key => {
  let val = localStorage.getItem(key);
  // 如果没有值就直接返回invalid无效提示
  if (!val) return 'invalid';
  // 存的时候转换成了字符串，现在转回来
  val = JSON.parse(val);
  // 存值时间戳 +  有效时间 = 过期时间戳
  // 如果当前时间戳大于过期时间戳说明过期了，删除值并返回提示
  if (Date.now() > val.time + val.expire) {
    localStorage.removeItem(key);
    return 'invalid';
  }
  return val.data;
};

在vue中

constobj = {
// 姓名
name:'XXX',
// 工号
userid:'20220123',
// 部门号
deptid:'1232433'
      };
// 给localstorage设置有效期限7天
Storage.prototype.setCanExpireLocal('userJson', JSON.stringify(obj), 7);

持续更新中。。。。。