快捷導(dǎo)航

localstorage實(shí)現(xiàn)帶過期時(shí)間的緩存功能

更新時(shí)間：2019年06月28日 18:19:53 作者：冬眠的山谷

這篇文章主要介紹了localstorage實(shí)現(xiàn)帶過期時(shí)間的緩存功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

一般可以使用cookie,localstorage,sessionStorage來實(shí)現(xiàn)瀏覽器端的數(shù)據(jù)緩存，減少對(duì)服務(wù)器的請(qǐng)求。

1.cookie數(shù)據(jù)存放在本地硬盤中，只要在過期時(shí)間之前，都是有效的，即使重啟瀏覽器。但是會(huì)在每次HTTP請(qǐng)求中添加到請(qǐng)求頭中，如果數(shù)據(jù)過多，會(huì)造成性能問題。

2.sessionStorage保存在瀏覽器內(nèi)存中，當(dāng)關(guān)閉頁面或者瀏覽器之后，信息丟失。

3.localstorage也是保存在本地硬盤中，除非主動(dòng)清除，信息是不會(huì)消失的。但是實(shí)際使用時(shí)我們需要對(duì)緩存設(shè)置過期時(shí)間，本文便是講解如何為localstorage添加過期時(shí)間功能。

這三者僅支持同源(host+port)的數(shù)據(jù),不同源的數(shù)據(jù)不能互相訪問到。

localstorage

localstorage支持以下方法

保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);

需要注意的是，僅支持String類型數(shù)據(jù)的讀取，如果存放的是數(shù)值類型，讀出來的是字符串類型的，對(duì)于存儲(chǔ)對(duì)象類型的，需要在保存之前JSON化為String類型。

對(duì)于緩存，我們一般有以下方法

set(key,value,expiredTime);
get(key);
remove(key);
expired(key,expiredTime);
clear();

實(shí)現(xiàn)

設(shè)置緩存

對(duì)于過期時(shí)間的實(shí)現(xiàn)，除了用于存放原始值的緩存(key)，這里添加了兩個(gè)緩存(key+EXPIRED:TIME)和(key+EXPIRED:START:TIME)，一個(gè)用于存放過期時(shí)間，一個(gè)用于存放緩存設(shè)置時(shí)的時(shí)間。

當(dāng)讀取的時(shí)候比較（過期時(shí)間+設(shè)置緩存的時(shí)間）和當(dāng)前的時(shí)間做對(duì)比。如果（過期時(shí)間+設(shè)置緩存時(shí)的時(shí)間）大于當(dāng)前的時(shí)間，則說明緩存沒過期。

注意這里使用JSON.stringify對(duì)存入的對(duì)象JSON化。讀取的時(shí)候也要轉(zhuǎn)回原始對(duì)象。

"key":{
    //輔助
    "expiredTime": "EXPIRED:TIME",
    "expiredStartTime": "EXPIRED:START:TIME",
    //全局使用
    //用戶信息
    "loginUserInfo": "USER:INFO",
    //搜索字段
    "searchString": "SEARCH:STRING",
  },
  /**
   * 設(shè)置緩存
   * @param key
   * @param value
   * @param expiredTimeMS 過期時(shí)間，單位ms
   */
  "set":function (key,value,expiredTimeMS) {
    if((expiredTimeMS == 0 ) || (expiredTimeMS == null)){
      localStorage.setItem(key,value);
    }
    else {
      localStorage.setItem(key,JSON.stringify(value));
      localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
      localStorage.setItem(key+cache.key.expiredStartTime,new Date().getTime());
    }
  },

讀取緩存

由于讀取出來的是時(shí)間信息是字符串，需要將其轉(zhuǎn)化為數(shù)字再進(jìn)行比較。

/**
   * 獲取鍵
   * @param key
   * @returns {*} key存在，返回對(duì)象；不存在，返回null
   */
  "get":function (key) {
    var expiredTimeMS = localStorage.getItem(key+cache.key.expiredTime);
    var expiredStartTime = localStorage.getItem(key+cache.key.expiredStartTime);
    var curTime = new Date().getTime();
    var sum = Number(expiredStartTime) + Number(expiredTimeMS);
    if((sum) > curTime){
      console.log("cache-緩存["+key+"]存在！");
      return JSON.parse(localStorage.getItem(key));
    }
    else {
      console.log("cache-緩存["+key+"]不存在！");
      return null;
    }
  },

移除緩存

移除緩存時(shí)需要把三個(gè)鍵同時(shí)移除。

/**
   * 移除鍵
   * @param key
   */
  "remove":function (key) {
    localStorage.removeItem(key);
    localStorage.removeItem(key+cache.key.expiredTime);
    localStorage.removeItem(key+cache.key.expiredStartTime);
  },

其他代碼

/**
   * 對(duì)鍵重新更新過期時(shí)間
   * @param key
   * @param expiredTimeMS 過期時(shí)間ms
   */
  "expired":function (key,expiredTimeMS) {

    if(cache.get(key)!=null){
      localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
    }

  },
  /**
   * 清除所有緩存
   */
  "clear":function () {
    localStorage.clear();
  }

總結(jié)

以上所述是小編給大家介紹的localstorage實(shí)現(xiàn)帶過期時(shí)間的緩存功能，希望對(duì)大家有所幫助如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: