微信小程序本地存儲增加有效期的方法
小程序的本地存儲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ù)時，檢查當(dāng)前時間是否超過了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();
// 如果當(dāng)前時間超過 限定的有效期時間，則視為無效數(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();
// 如果當(dāng)前時間超過 限定的有效期時間，則視為無效數(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ù)。代碼如下：
八、修改時效性
當(dāng)然，時效性范圍是可以被修改的，所以這里要對兩種場景增加有效期范圍的修改。
首先是增加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)文章
本文通過實例代碼介紹JS中的Select框?qū)崿F(xiàn)模糊搜索功能,下面是使用JavaScript來實現(xiàn)模糊搜索的功能,代碼分為html部分和javascript部分,感興趣的朋友跟隨小編一起看看吧2024-06-06
二分查找在我們學(xué)習(xí)算法中是很重要的一部分，而且面試的時候會經(jīng)常的讓我們手寫一些算法。所以這篇文章將通過三個場景帶大家深入了解二分查找算法2023-03-03
JS封裝cookie操作函數(shù)實例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實例形式分析了JavaScript實現(xiàn)針對cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
遍歷對象在JS編程中是一個常見的任務(wù),通過使用for...in循環(huán)、Object.keys()、Object.values()和Object.entries()方法,我們可以輕松地遍歷對象的屬性和值,這篇文章主要給大家介紹了關(guān)于JavaScript中各種對象遍歷方法的相關(guān)資料,需要的朋友可以參考下2025-08-08
非常不錯的，收藏效果代碼，增加當(dāng)前頁的現(xiàn)實，實現(xiàn)對比2008-08-08
ES6中Promise、async、await用法超詳細講解指南
async+await是ES6中引入的異步編程解決方案,旨在解決異步編程中的回調(diào)地獄問題,下面這篇文章主要給大家介紹了關(guān)于ES6中Promise、async、await用法超詳細講解的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了延時加載JavaScript代碼提高速度的相關(guān)資料,需要的朋友可以參考下2015-12-12
一文了解JavaScript中call/apply/bind的使用
這篇文章主要介紹了一文了解JavaScript中call/apply/bind的使用，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-07-07
JavaScript Html實現(xiàn)移動端紅包雨功能頁面
這篇文章主要為大家詳細介紹了JavaScript Html實現(xiàn)移動端紅包雨功能頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
requestAnimationFrame用法優(yōu)化源碼解析
這篇文章主要介紹了requestAnimationFrame用法優(yōu)化源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10