一、前言

第一次發(fā)現(xiàn)簡述還能寫markdown呢，簡直是打開了新世界的大門，再也不用截圖了！這兩天在封裝登陸模塊，想要在前端存儲 access_token。以前都是存 cookie 里，突然想用用localStorage，但是單純使用 localStorage 又沒法直接設(shè)置 access_token 的失效時間。

二、封裝父類 Storag

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

三、封裝子類 LocalStorage

class LocalStorage {
  /**
   * set 方法，設(shè)置
   * @param key String 鍵
   * @param value 值
   * @param expired writeTime 寫入時間，單位：ms
   */
  set (key, value, expired) {
    let data = {
      value
      writeTime: this.writeTime, // 寫入時間，繼承自 Stroage
      expired
    };
    // 值是數(shù)組，不能直接存儲，需要轉(zhuǎn)換 JSON.stringify
    localStorage.setItem(key, JSON.stringify(data));
  }

  /**
   * get 方法，獲取
   * @param key 鍵
   */
  get () {
    const dataJSON = localStorage.getItem(key);
    // 當(dāng)目標(biāo)不存在時直接結(jié)束
    if (this.isNotExist(dataJSON)) {
      return null;
    }
    let data = JSON.parse(dataJSON);
    // 當(dāng)數(shù)據(jù)的存在周期未定義時，它被認(rèn)為是永久的
    if (this.isNotExist(data.expired)) {
      return data.value;
    }
    // 數(shù)據(jù)聲明期結(jié)束時釋放數(shù)據(jù)
    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');

五、結(jié)語

這樣就實現(xiàn)了為 localstorage 添加了有效時間。網(wǎng)上還有一種方法，不直接刪除過期的 localstorage 值，而是為它的 key 值加 expired 前綴，原理一樣同學(xué)們?nèi)收咭娙?，個人這邊暫時沒有需求，因此沒有使用這種方法。
希望這篇文章能夠幫助同學(xué)們成功爬坑，如果對您有所幫助，請關(guān)注、點(diǎn)贊并收藏，有其他問題也可以留言或私信，歡迎討論！