---

📋前言

這篇文章是本專欄 uni-app 的基礎篇的第五章，文章的主要內容是關于 uni-app 數據緩存的相關知識，包括如何使用 uni-app 提供的數據緩存 API 進行數據的獲取、存儲和刪除操作。

?關于專欄

本專欄主要是分享和介紹從零到一學習和使用的 uni-app 的筆記和個人經驗。通過個人的學習經驗和工作經驗來給大家分享關于 uni-app 開發的技巧，以及快速入門的訣竅等等。

專欄主頁：uni-app_黛琳ghz的博客-CSDN博客

---

🎯什么是數據存儲

在軟件開發中，數據存儲指的是將應用程序中的數據保存在本地或者云端的一種機制，讓開發者可以隨時讀取和修改這些數據。數據存儲可以提高應用程序的性能和用戶體驗，存儲好的數據可以避免每次打開應用程序都需要從服務器獲取數據。

在實際 uni-app 開發小程序時，數據緩存是一個非常重要技術點。數據緩存可以將應用程序中的數據保存在本地，比如說登錄成功后，可以把 sessionId 、accountId、賬號等等登錄成功后返回信息緩存到本地，這樣就不用每次調用接口都需要從服務器獲取這些數據。如下圖調用登錄接口，登陸成功以后，緩存以下信息到本地存儲。

通過上面的簡單描述，我們對數據存儲已經有了一定了解，接下來我們一起看下在 uni-app 中有哪些數據存儲的 API 。首先對數據存儲的操作進行分類，分為存儲、獲取、刪除。

注意：在介紹各個方法之前，我們要留意區分各個方法是同步還是異步的操作，其中我們可以根據關鍵詞 “Sync” 來區分，方法中含有這個詞的方法為同步方法。

🧩數據存儲——存儲

數據存儲的第一步就是要把需要的值存儲到本地，存儲了數據才有對應其他操作（獲取和刪除）。接下來我們來看一下怎么把需要的值存儲到程序本地。

📌 uni.setStorage(OBJECT)

通過傳入一個包含 key 和 data 屬性的對象 OBJECT 來指定要存儲的數據。其中，key 是要存儲的數據的唯一標識符，data 是要存儲的數據。存儲的數據可以是 JavaScript 對象、字符串、數字等類型。（異步操作）

參數說明

參數名	類型	必填	說明
key	String	是	本地緩存中的指定的 key
data	Any	是	需要存儲的內容，只支持原生類型、及能夠通過 JSON.stringify 序列化的對象
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼

uni.setStorage({key: 'storage_key',data: 'hello uni-app',success: function () {console.log('success');}
});

📌 uni.setStorageSync(KEY,DATA)

將數據同步存儲到本地緩存中，其中 key 是存儲的鍵名，data 是要存儲的數據。（同步操作）

參數說明

參數	類型	必填	說明
key	String	是	本地緩存中的指定的 key
data	Any	是	需要存儲的內容，只支持原生類型、及能夠通過 JSON.stringify 序列化的對象

示例代碼

try {uni.setStorageSync('storage_key', 'hello');
} catch (e) {// error
}

🧩數據存儲——獲取

通過上面的方法。我們把數據存儲到本地以后，我們就可以獲取這些數據，直接進行使用，不用再重新調用獲取。接下來我們來看一下怎么獲取到存儲到本地的值。

📌 uni.getStorage(OBJECT)

從本地緩存中異步獲取指定 key 對應的內容。（異步操作）

參數說明

參數名	類型	必填	說明
key	String	是	本地緩存中的指定的 key
success	Function	是	接口調用的回調函數，res = {data: key對應的內容}
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success 返回參數說明

參數	類型	說明
data	Any	key 對應的內容

示例代碼

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

📌 uni.getStorageSync(KEY)

該方法可以根據鍵名 key 同步獲取相應的存儲數據。（同步操作）

參數說明

參數	類型	必填	說明
key	String	是	本地緩存中的指定的 key

上面介紹數據存儲的時候，在程序中存儲了一個值為 islogin，然后我們通過 uni.getStorageSync 來獲取一下這個值。代碼和結果圖如下。

console.log('islogin:' + uni.getStorageSync('islogin'))

📌 uni.getStorageInfo(OBJECT)

異步獲取當前 storage 的相關信息。（異步操作）

參數說明

參數名	類型	必填	說明
success	Function	是	接口調用的回調函數，詳見返回參數說明
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success 返回參數說明

參數	類型	說明
keys	Array	當前 storage 中所有的 key
currentSize	Number	當前占用的空間大小，單位：kb
limitSize	Number	限制的空間大小，單位：kb

示例代碼

uni.getStorageInfo({success: function (res) {console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);}
});

📌 uni.getStorageInfoSync()

同步獲取當前 storage 的相關信息。具體參數同上，只是該方法為同步操作。

示例代碼

try {const res = uni.getStorageInfoSync();console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);
} catch (e) {// error
}

🧩數據存儲——刪除

📌 uni.removeStorage(OBJECT)

從本地緩存中異步移除指定 key。（異步操作）

參數說明

參數名	類型	必填	說明
key	String	是	本地緩存中的指定的 key
success	Function	是	接口調用的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼

uni.removeStorage({key: 'storage_key',success: function (res) {console.log('success');}
});

📌 uni.removeStorageSync(KEY)

從本地緩存中同步移除指定 key。（同步操作）

參數說明

參數名	類型	必填	說明
key	String	是	本地緩存中的指定的 key

我們可以看下這段代碼刪除數據前后的輸出值。

	console.log('刪除前islogin:' + uni.getStorageSync('storage_key'))uni.removeStorageSync('storage_key');console.log('刪除后islogin:' + uni.getStorageSync('storage_key'))

📌 uni.clearStorage()

用于清空本地緩存的方法。調用該方法會將所有存儲在本地緩存中的數據全部清除。

📌 uni.clearStorageSync()

用于同步清空本地緩存的方法。調用該方法會將所有存儲在本地緩存中的數據全部清除。（同步操作）

二者區別：
首先拋開異步和同步的操作，無論是 remove 和 clear 都是可以刪除本地存儲的數據，但是二者的刪除方式又是有區別的，這里我們以 uni.clearStorageSync() 和 uni.removeStorageSync 為例子進行對比。

• uni.clearStorageSync() 方法用于清空所有本地緩存數據，即一次性刪除所有存儲的數據；而 uni.removeStorageSync(key) 方法用于刪除指定鍵名（key）對應的單個數據，只刪除特定的數據而不影響其他數據。
• uni.removeStorageSync(key) 方法需要傳入要刪除的數據的鍵名作為參數，而 uni.clearStorageSync() 方法不需要傳入任何參數。

使用場景：

• 退出登錄：在用戶退出登錄時，使用 uni.removeStorageSync(key) 方法刪除與當前用戶相關的單個本地緩存數據。例如，可以刪除用戶登錄憑證或其他與登錄狀態相關的數據，如下圖我們可以刪除對應的緩存 id。之所以不用 uni.clearStorageSync 刪除全部，是因為部分數據是需要保留到下次登錄的，比如說手機號碼、賬號登錄這種情況，我們退出登錄后回到登陸頁面，輸入框還可以保留上一個登錄用戶的登錄賬號或手機號。
  
• 注銷賬號：在用戶選擇注銷賬號時，使用 uni.clearStorageSync() 方法清空所有本地緩存數據，確保用戶個人信息和數據被徹底清除，這樣做可以防止個人數據被保留在本地設備上。

---

🧩注意事項

uni-app 的 Storage 在不同端的實現不同：

• H5 端為 localStorage，瀏覽器限制 5 M大小，是緩存概念，可能會被清理
• App端為原生的 plus.storage，無大小限制，不是緩存，是持久化的
• 各個小程序端為其自帶的 storage api，數據存儲生命周期跟小程序本身一致，即除用戶主動刪除或超過一定時間被自動清理，否則數據都一直可用。
• 微信小程序單個 key 允許存儲的最大數據長度為 1 MB，所有數據存儲上限為 10 MB。
• 支付寶小程序單條數據轉換成字符串后，字符串長度最大 200*1024。同一個支付寶用戶，同一個小程序緩存總上限為 10 MB。
• 非 App 平臺清空 Storage 會導致 uni.getSystemInfo 獲取到的 deviceId 改變。

---

📝最后

到此就是本篇文章的全部內容了，這篇文章記錄的主要內容的是關于 uni-app 數據緩存的相關知識，包括如何使用 uni-app 提供的數據緩存 API 進行數據的獲取、存儲和刪除操作。利用這些API，我們可以靈活地控制數據的存儲和管理，從而實現數據的持久化存儲、快速訪問和安全刪除。在實際開發過程中，合理利用 uni-app 提供的數據緩存 API，可以有效提升應用的性能和用戶體驗。這篇文章是博主 uni-app 專欄基礎篇的第五篇文章，后續會不斷的更新更多關于 uni-app 的干貨、實戰經驗、學習經驗，期待你的關注和留言。