亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2024年07月15日 11:44:15   作者：覺醒法師  
這篇文章主要介紹了微信小程序本地存儲增加有效期的方法,這里通過一個簡單示例,展示如何設(shè)置有效期為1小時的本地存儲,首先將storage.js引入到app.js中,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

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

一、小程序本地存儲API

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

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

        本地存儲如下圖：

        上圖可見，小程序提供的本地存儲API沒有明確設(shè)置有效期的功能。為了解決這個問題，我們需要在存儲數(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){
  }
  // 獲取對應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
  }
}

三、獲取過期時間戳

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

// 獲取時效性 - 時間戳
const getStamptime = hour => {
  const date = new Date();
  // 增加對應(yīng)小時
  date.setHours(date.getHours() + hour);
  // 返回增加對應(yīng)小時數(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è)置其有效期；在獲取數(shù)據(jù)時，通過checkTimeRange()方法判斷數(shù)據(jù)是否過期，并返回對應(yīng)值。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認情況下為1小時
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 獲取對應(yīng)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();
  // 增加對應(yīng)小時
  date.setHours(date.getHours() + hour);
  // 返回增加對應(yīng)小時數(shù)后的時間戳
  return date.getTime();
}
class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默認情況下為1小時
  }
  // 保存數(shù)據(jù)
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 獲取對應(yīng)key值數(shù)據(jù)
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}
export default new LocalStorage();

七、示例

        這里通過一個簡單示例，展示如何設(shè)置有效期為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è)定，用于某些特定場景需要單獨設(shè)置數(shù)據(jù)的有效期范圍。

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

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 ) 
    } )
  }
  // 獲取對應(yīng)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
  }
})

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

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

相關(guān)文章

最新評論