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

更新時間：2024年07月15日 11:44:15 作者：覺醒法師

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

一、小程序本地存儲API

小程序的本地存儲API提供了設置存儲的鍵值，代碼如下：

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

本地存儲如下圖：

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

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

二、創(chuàng)建Storage類

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

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

三、獲取過期時間戳

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

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

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

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

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

五、封裝小程序本地存儲API

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

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

六、完整代碼

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

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

七、示例

這里通過一個簡單示例，展示如何設置有效期為1小時的本地存儲。首先將storage.js引入到app.js中，代碼如下：

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

本地存儲效果如下圖：

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

八、修改時效性

當然，時效性范圍是可以被修改的，所以這里要對兩種場景增加有效期范圍的修改。

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

另外，設置有效期范圍值時，還需對其進行合法性校驗后，方可賦值使用。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認情況下為1小時
  }
  // 檢查有效期范圍值是否合法，不合法默認為全局的有效期
  verifyTime(){
    return 'number'!==typeof value || value <= 0 ? this.timeRange : value;
  }
  // 修改時效范圍
  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 ) 
    } )
  }
  // 獲取對應key值數(shù)據(jù)
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}

九、定義為全局變量

有些人可能覺得每次使用時，要單獨引用會比較麻煩，這里可以將新封裝的本地存儲對象，綁定到wx全局對象中，就可代碼如下：

// app.js
import LocalStorage from './utils/storage'
wx.$storage = LocalStorage;
App({
  onLaunch() {
    // 展示本地存儲能力
    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
  }
})

所以，在小程序中，提供的本地存儲沒有明確的有效期設置，我們可以通過模擬有效期行為來實現(xiàn)這一功能。

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

您可能感興趣的文章: