本地數據存儲與緩存操作：玩轉 uni.setStorageSync 全家桶！
作者：Ss肥魚
在前端項目中，我們常常需要將一些數據保存在本地，在 UniApp 中，使用起來非常簡單，但做好封裝和規范化使用才是關鍵！
在前端項目中，我們常常需要將一些數據保存在本地，比如：
- 用戶 Token / 登錄信息
- 頁面緩存數據
- 用戶行為記錄或設置項
在 UniApp 中，使用起來非常簡單，但做好封裝和規范化使用才是關鍵！
本地緩存的核心 API
UniApp 提供同步和異步兩套 API：
(1) 同步 API（推薦在大多數場景使用）
方法名 | 功能說明 |
uni.setStorageSync(key, data) | 存儲數據 |
uni.getStorageSync(key) | 獲取數據 |
uni.removeStorageSync(key) | 移除某個 key 的數據 |
uni.clearStorageSync() | 清空所有本地緩存數據 |
示例：
// 存儲
uni.setStorageSync('token', 'abc123')
// 讀取
const token = uni.getStorageSync('token')
// 刪除
uni.removeStorageSync('token')
// 清空全部
uni.clearStorageSync()(2) 異步 API（需要回調，不推薦頻繁使用）
uni.setStorage({
key: 'userInfo',
data: { name: 'Tom' },
success() {
console.log('保存成功')
}
})封裝 Storage 工具函數（推薦實戰）
我們可以封裝一個通用的 storage.js 工具，統一管理緩存操作，避免硬編碼 key、統一處理 JSON 等數據。
utils/storage.js：
// 存儲數據
exportfunctionset(key, value) {
try {
uni.setStorageSync(key, value)
} catch (e) {
console.error(`保存失敗：${key}`, e)
}
}
// 讀取數據
exportfunctionget(key, defaultValue = null) {
try {
const result = uni.getStorageSync(key)
return result !== '' ? result : defaultValue
} catch (e) {
console.error(`讀取失敗：${key}`, e)
return defaultValue
}
}
// 刪除指定 key
exportfunctionremove(key) {
try {
uni.removeStorageSync(key)
} catch (e) {
console.error(`刪除失敗：${key}`, e)
}
}
// 清空所有緩存
exportfunctionclear() {
try {
uni.clearStorageSync()
} catch (e) {
console.error('清空緩存失敗', e)
}
}使用方式（統一入口，簡單明了）
引用：
import * as Storage from '@/utils/storage.js'使用：
// 保存 Token
Storage.set('token', 'abc123')
// 獲取 Token
const token = Storage.get('token')
// 刪除 Token
Storage.remove('token')
// 清空所有緩存
Storage.clear()應用場景舉例
場景 1：登錄成功后保存用戶信息
// 登錄成功后
Storage.set('userInfo', res.data.user)
Storage.set('token', res.data.token)場景 2：頁面加載時讀取緩存
onLoad() {
const userInfo = Storage.get('userInfo')
if (userInfo) {
this.user = userInfo
}
}場景 3：退出登錄時清除緩存
logout() {
Storage.clear()
uni.reLaunch({
url: '/pages/login/login'
})
}小結
能力點 | 說明 |
API 掌握 | 熟練使用 uni.setStorageSync |
封裝函數 | 實現通用緩存操作，減少重復 |
實戰場景應用 | 登錄、初始化、退出全流程覆蓋 |
責任編輯：趙寧寧
來源：
Ssoul肥魚
