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