一、前言

第一次发现简述还能写markdown呢，简直是打开了新世界的大门，再也不用截图了！这两天在封装登陆模块，想要在前端存储 access_token。以前都是存 cookie 里，突然想用用localStorage，但是单纯使用 localStorage 又没法直接设置 access_token 的失效时间。

二、封装父类 Storag

class Storage {
  constructor() {
    this.writeTime = Number(new Date()); // 写入时间
  }
  isNotExist(value) {
    return value === null || typeof(value) === 'undefined';
  }
}

三、封装子类 LocalStorage

class LocalStorage {
  /**
   * set 方法，设置
   * @param key String 键
   * @param value 值
   * @param expired writeTime 写入时间，单位：ms
   */
  set (key, value, expired) {
    let data = {
      value
      writeTime: this.writeTime, // 写入时间，继承自 Stroage
      expired
    };
    // 值是数组，不能直接存储，需要转换 JSON.stringify
    localStorage.setItem(key, JSON.stringify(data));
  }

  /**
   * get 方法，获取
   * @param key 键
   */
  get () {
    const dataJSON = localStorage.getItem(key);
    // 当目标不存在时直接结束
    if (this.isNotExist(dataJSON)) {
      return null;
    }
    let data = JSON.parse(dataJSON);
    // 当数据的存在周期未定义时，它被认为是永久的
    if (this.isNotExist(data.expired)) {
      return data.value;
    }
    // 数据声明期结束时释放数据
    if (this.isOutPeriod(data)) {
      this.del(key);
      return null;
    }
    return data.value;
  }
  
  /**
   * del 方法，删除
   * @param key 键
   */
  del (key) {
    localStorage.removeItem(key);
  }
  
  /**
   * isOutPeriod 方法，判断 value 值是否过期
   * @param value 值
   */
  isOutPeriod (value) {
    if (!value.value) {
      return true;
    }  
    let readTime = Number(new Date());
    return (readTime - value.writeTime) > value.expired;
  }
}

四、使用

1、storage.js

export const localstorage = new LocalStorage();

2、utils.js

import { localstorage } from './storage';
expoert { localstorage };

3、引入

import { localstorage } from 'yourPath/utils';

4、test

// 存储 access_token，有效时间为 5 分钟
localstorage.set('access_token', 'test', 1000 * 60 * 5);
// 获取 access_token
localstorage.get('access_token'); // test
// 删除 access_token
localstorage.del('access_token');

五、结语

这样就实现了为 localstorage 添加了有效时间。网上还有一种方法，不直接删除过期的 localstorage 值，而是为它的 key 值加 expired 前缀，原理一样同学们仁者见仁，个人这边暂时没有需求，因此没有使用这种方法。
希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！