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

一、小程序本地存儲API

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

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

? ? ? ? 本地存儲如下圖：

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

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

二、創建Storage類

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

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

三、獲取過期時間戳

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

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

四、檢查數據是否過期

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

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

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

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

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

六、完整代碼

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

// 檢查數據是否過期
const checkTimeRange = data => {const time = new Date().getTime();// 如果當前時間超過 限定的有效期時間，則視為無效數據，返回nullreturn data.expiration < time ? null : data.value;
}// 獲取時效性 - 時間戳
const getStamptime = hour => {const date = new Date();// 增加對應小時date.setHours(date.getHours() + hour);// 返回增加對應小時數后的時間戳return date.getTime();
}class LocalStorage {constructor(){this.timeRange = 1;   //默認情況下為1小時}// 保存數據setStorageSync(key, value){wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )}// 獲取對應key值數據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)// 展示有效期本地存儲, 在有效期內只存儲一次let time_logs = LocalStorage.getStorageSync('time_logs');if(!time_logs){time_logs = [Date.now()];LocalStorage.setStorageSync('time_logs', time_logs);}},globalData: {userInfo: null}
})

? ? ? ? 本地存儲效果如下圖：

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

八、修改時效性

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

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

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

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

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