localStorage設置過期時間

划重點：

1. sessionStorage不能跨tab頁
2. 設置過期時間在原有的原生api基礎上封裝，存在key的過期數據

眾所周知，前端三大緩存，cookie，sessionStorage，localStorage，cookie空間太小，一旦大了，會消耗流量，只適合存一些登錄會話信息，而sessionStorage的過期時間就是關閉瀏覽器，是個臨時會話窗口，但是，最近這個差點把我坑了，就是sessionStorage只能在同一標簽下共享，加入你把網址復制粘貼到新打開的標簽頁里面，你會驚喜的發現，what？居然不共享，這不坑爹呢嗎？咳咳。。還有就是localStorage了，這個好處就是存儲空間大，長時間保存，同一瀏覽器，標簽頁全部共享，它是直接存到電腦硬盤上的，不好的是，它是永久有效的，除非手動改清除，否則它會在你電腦里待上一輩子，供他吃好的喝好的，也就是無法設置失效時間，但是我還真不服了，憑什么我用你就得養你一輩子，哼哼，於是我就自己簡單封裝一下，讓它可以設置失效時間，下面我們用ES6的類來封裝

class Storage {
  constructor(name) {
    this.name = 'storage';
  }
  //設置緩存
  setItem(params) {
    let obj = {
      name: '',
      value: '',
      expires: '',
      startTime: new Date().getTime(), //記錄何時將值存入緩存，毫秒級
    };
    let options = {};
    //將obj和傳進來的params合並
    Object.assign(options, obj, params);
    if (options.expires) {
      //如果options.expires設置了的話
      //以options.name為key，options為值放進去
      localStorage.setItem(options.name, JSON.stringify(options));
    } else {
      //如果options.expires沒有設置，就判斷一下value的類型
      let type = Object.prototype.toString.call(options.value);
      //如果value是對象或者數組對象的類型，就先用JSON.stringify轉一下，再存進去
      if (Object.prototype.toString.call(options.value) == '[object Object]') {
        options.value = JSON.stringify(options.value);
      }
      if (Object.prototype.toString.call(options.value) == '[object Array]') {
        options.value = JSON.stringify(options.value);
      }
      localStorage.setItem(options.name, options.value);
    }
  }
  //拿到緩存
  getItem(name) {
    let item = localStorage.getItem(name);
    //先將拿到的試着進行json轉為對象的形式
    try {
      item = JSON.parse(item);
    } catch (error) {
      //如果不行就不是json的字符串，就直接返回
      item = item;
    }
    //如果有startTime的值，說明設置了失效時間
    if (item.startTime) {
      let date = new Date().getTime();
      //何時將值取出減去剛存入的時間，與item.expires比較，如果大於就是過期了，如果小於或等於就還沒過期
      if (date - item.startTime > item.expires) {
        //緩存過期，清除緩存，返回false
        localStorage.removeItem(name);
        return false;
      } else {
        //緩存未過期，返回值
        return item.value;
      }
    } else {
      //如果沒有設置失效時間，直接返回值
      return item;
    }
  }
  //移出緩存
  removeItem(name) {
    localStorage.removeItem(name);
  }
  //移出全部緩存
  clear() {
    localStorage.clear();
  }
}

以上就是全部代碼了，diamagnetic說明我全部寫在注釋里了，我封裝的這個還有個好處就是，你存進去是什么類型的值，取出來還是什么類型的值，比如你存進去是個對象，取出來還是個對象，用不着轉類型了，大家都知道緩存只支持字符串類型的數據，但是我這里面已經幫你做好了封裝，你只管存和取就可以了，下面我們來試試效果

設置失效時間

let storage = new Storage();
storage.setItem({
  name: 'name',
  value: '前端林三哥',
});

 

下面我把值取出來

let value = storage.getItem('name');
console.log('我是value',value);

 

下面我們設置時間短一點，5秒，然后再取出來

在我寫的這個功夫應該已經過期了，我們取出來

let value = storage.getItem('name');
console.log('我是value',value);

 

false就說明過期了，緩存也給刪掉了

下面我們檢驗存進去的類型和取出來的類型
普通字符串以上已經試過了，現在試試對象

storage.setItem({
  name: 'name',
  value: {
    name: '前端林三哥',
    skills: '聰明，帥氣',
  },
});

重點來了，我們直接取

let value = storage.getItem('name');
console.log('我是value',value);

直接就取出來了
。。。。。。。。。。。。。。。。。
下面再試試數組對象

storage.setItem({
  name: 'name',
  value: [
    {
      name: '前端林三哥',
      skills: '聰明，帥氣',
    },
    {
      name: '前端林小二',
      skills: '聰明，帥氣，窮',
    },
  ],
});

 

我們直接取出來

let value = storage.getItem('name');
console.log('我是value',value);

 

是不是很神奇，哈哈，快來試試吧！
————————————————
版權聲明：本文為CSDN博主「三哥玩前端」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zhaoxiang66/article/details/86703438

喜歡這篇文章？歡迎打賞~~