快捷導(dǎo)航

微信小程序本地存儲(chǔ)增加有效期的方法

更新時(shí)間：2024年07月15日 11:44:15 作者：覺(jué)醒法師

這篇文章主要介紹了微信小程序本地存儲(chǔ)增加有效期的方法,這里通過(guò)一個(gè)簡(jiǎn)單示例,展示如何設(shè)置有效期為1小時(shí)的本地存儲(chǔ),首先將storage.js引入到app.js中,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

小程序的本地存儲(chǔ)API提供了wx.setStorageSync和wx.setStorage來(lái)存儲(chǔ)數(shù)據(jù)，注意的是，小程序的本地存儲(chǔ)并沒(méi)有明確的有效期設(shè)置，存儲(chǔ)的數(shù)據(jù)在不超過(guò)限制的情況下，會(huì)一直保留。

一、小程序本地存儲(chǔ)API

小程序的本地存儲(chǔ)API提供了設(shè)置存儲(chǔ)的鍵值，代碼如下：

const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

本地存儲(chǔ)如下圖：

上圖可見(jiàn)，小程序提供的本地存儲(chǔ)API沒(méi)有明確設(shè)置有效期的功能。為了解決這個(gè)問(wèn)題，我們需要在存儲(chǔ)數(shù)據(jù)時(shí)附加一個(gè)expiration字段，用于記錄數(shù)據(jù)的過(guò)期時(shí)間，在獲取數(shù)據(jù)時(shí)，檢查當(dāng)前時(shí)間是否超過(guò)了expiration指定的時(shí)間，如果超過(guò)則認(rèn)為數(shù)據(jù)已失效。

由于此方法不是由小程序API直接支持的功能，而是通過(guò)檢查數(shù)據(jù)的有效性來(lái)模擬有效期行為，小程序本地存儲(chǔ)不會(huì)自動(dòng)檢查刪除過(guò)期數(shù)據(jù)，需要在使用數(shù)據(jù)時(shí)檢查數(shù)據(jù)的有效性。

二、創(chuàng)建Storage類

在項(xiàng)目中創(chuàng)建一個(gè)storage.js文件，用于定義LocalStorage類，對(duì)小程序本地存儲(chǔ)API提供的wx.setStorageSync進(jìn)行封裝，增加數(shù)據(jù)保存有效期的限定，這里將其定義在utils目錄中，代碼如下：

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認(rèn)情況下為1小時(shí)
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value){
  }
  // 獲取對(duì)應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
  }
}

三、獲取過(guò)期時(shí)間戳

在storage.js文件中，定義getStamptime()方法，用于獲取過(guò)期的時(shí)間戳。這里設(shè)置的時(shí)間范圍是通過(guò)小時(shí)為單位，代碼如下：

// 獲取時(shí)效性 - 時(shí)間戳
const getStamptime = hour => {
  const date = new Date();
  // 增加對(duì)應(yīng)小時(shí)
  date.setHours(date.getHours() + hour);
  // 返回增加對(duì)應(yīng)小時(shí)數(shù)后的時(shí)間戳
  return date.getTime();
}

四、檢查數(shù)據(jù)是否過(guò)期

在storage.js文件中，定義checkTimeRange()方法，用于鑒定獲取數(shù)據(jù)是否過(guò)期。如果數(shù)據(jù)過(guò)期則返回null，未過(guò)期則返回具體數(shù)據(jù)。代碼如下：

// 檢查數(shù)據(jù)是否過(guò)期
const checkTimeRange = data => {
  const time = new Date().getTime();
  // 如果當(dāng)前時(shí)間超過(guò) 限定的有效期時(shí)間，則視為無(wú)效數(shù)據(jù)，返回null
  return data.expiration < time ? null : data.value;
}

五、封裝小程序本地存儲(chǔ)API

這里將小程序本地存儲(chǔ)wx.setStorageSync進(jìn)行封裝，在保存數(shù)據(jù)時(shí)，通過(guò)getStamptime()方法設(shè)置其有效期；在獲取數(shù)據(jù)時(shí)，通過(guò)checkTimeRange()方法判斷數(shù)據(jù)是否過(guò)期，并返回對(duì)應(yīng)值。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認(rèn)情況下為1小時(shí)
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 獲取對(duì)應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}

六、完整代碼

封裝后的storage.js文件完整代碼如下：

// 檢查數(shù)據(jù)是否過(guò)期
const checkTimeRange = data => {
  const time = new Date().getTime();
  // 如果當(dāng)前時(shí)間超過(guò) 限定的有效期時(shí)間，則視為無(wú)效數(shù)據(jù)，返回null
  return data.expiration < time ? null : data.value;
}
// 獲取時(shí)效性 - 時(shí)間戳
const getStamptime = hour => {
  const date = new Date();
  // 增加對(duì)應(yīng)小時(shí)
  date.setHours(date.getHours() + hour);
  // 返回增加對(duì)應(yīng)小時(shí)數(shù)后的時(shí)間戳
  return date.getTime();
}
class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認(rèn)情況下為1小時(shí)
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 獲取對(duì)應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}
export default new LocalStorage();

七、示例

這里通過(guò)一個(gè)簡(jiǎn)單示例，展示如何設(shè)置有效期為1小時(shí)的本地存儲(chǔ)。首先將storage.js引入到app.js中，代碼如下：

// app.js
import LocalStorage from './utils/storage'
App({
  onLaunch() {
    // 展示本地存儲(chǔ)能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 展示有效期本地存儲(chǔ), 在有效期內(nèi)只存儲(chǔ)一次
    let time_logs = LocalStorage.getStorageSync('time_logs');
    if(!time_logs){
      time_logs = [Date.now()];
      LocalStorage.setStorageSync('time_logs', time_logs);
    }
  },
  globalData: {
    userInfo: null
  }
})

本地存儲(chǔ)效果如下圖：

重新刷新頁(yè)面后，小程序提供的本地存儲(chǔ)會(huì)繼續(xù)追加數(shù)據(jù)，而增加了有效期的本地存儲(chǔ)則在時(shí)效內(nèi)不會(huì)繼續(xù)執(zhí)行，依然是一份數(shù)據(jù)。代碼如下：

八、修改時(shí)效性

當(dāng)然，時(shí)效性范圍是可以被修改的，所以這里要對(duì)兩種場(chǎng)景增加有效期范圍的修改。

首先是增加setTimeRange()方法，用于統(tǒng)一修改全局有效期范圍；對(duì)setStorageSync()方法增加有效期范圍設(shè)定，用于某些特定場(chǎng)景需要單獨(dú)設(shè)置數(shù)據(jù)的有效期范圍。

另外，設(shè)置有效期范圍值時(shí)，還需對(duì)其進(jìn)行合法性校驗(yàn)后，方可賦值使用。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認(rèn)情況下為1小時(shí)
  }
  // 檢查有效期范圍值是否合法，不合法默認(rèn)為全局的有效期
  verifyTime(){
    return 'number'!==typeof value || value <= 0 ? this.timeRange : value;
  }
  // 修改時(shí)效范圍
  setTimeRange(value){
    this.timeRange = this.verifyTime(value);
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value, expiration){
    wx.setStorageSync(key, { 
      value,  
      expiration: getStamptime( 'undefined'!==typeof expiration ? this.verifyTime(expiration) : this.timeRange ) 
    } )
  }
  // 獲取對(duì)應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}

九、定義為全局變量

有些人可能覺(jué)得每次使用時(shí)，要單獨(dú)引用會(huì)比較麻煩，這里可以將新封裝的本地存儲(chǔ)對(duì)象，綁定到wx全局對(duì)象中，就可代碼如下：

// app.js
import LocalStorage from './utils/storage'
wx.$storage = LocalStorage;
App({
  onLaunch() {
    // 展示本地存儲(chǔ)能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    let time_logs = wx.$storage.getStorageSync('time_logs');
    if(!time_logs){
      time_logs = [Date.now()];
      wx.$storage.setStorageSync('time_logs', time_logs);
    }
  },
  globalData: {
    userInfo: null
  }
})

所以，在小程序中，提供的本地存儲(chǔ)沒(méi)有明確的有效期設(shè)置，我們可以通過(guò)模擬有效期行為來(lái)實(shí)現(xiàn)這一功能。

到此這篇關(guān)于微信小程序 - 本地存儲(chǔ) 增加有效期的文章就介紹到這了,更多相關(guān)小程序有效期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: