mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,137 @@
|
||||
# uni.clearStorage - 清除所有存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.clearStorage` 用于清理本地数据缓存，清除所有存储的数据。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('清除成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 清除所有数据
|
||||
|
||||
```javascript
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('所有数据已清除')
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 退出登录时清除
|
||||
|
||||
```javascript
|
||||
function logout() {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
console.log('数据已清除')
|
||||
// 跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearAllData">清除所有数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearAllData() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要清除所有数据吗？此操作不可恢复',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '清除成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 重新加载页面
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.clearStorageSync()
|
||||
console.log('清除成功')
|
||||
} catch (err) {
|
||||
console.error('清除失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
此 API 无需参数。
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 此操作会清除所有本地存储的数据，请谨慎使用
|
||||
2. 建议在清除前提示用户确认
|
||||
3. 同步版本 `clearStorageSync` 性能更好
|
||||
4. 清除后可能需要重新登录或初始化数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstoragesync
|
||||
- **删除单个**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
|
||||
@@ -0,0 +1,202 @@
|
||||
# uni.getStorageInfo - 获取存储信息示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfo
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorageInfo` 用于异步获取当前 storage 的相关信息。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
console.log('存储信息', res)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取存储信息
|
||||
|
||||
```javascript
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
console.log('所有key', res.keys)
|
||||
console.log('当前占用的空间大小', res.currentSize, 'KB')
|
||||
console.log('限制的空间大小', res.limitSize, 'KB')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 检查存储空间
|
||||
|
||||
```javascript
|
||||
function checkStorageSpace() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
const usagePercent = (res.currentSize / res.limitSize * 100).toFixed(2)
|
||||
console.log(`存储使用率：${usagePercent}%`)
|
||||
|
||||
if (usagePercent > 80) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '存储空间不足，建议清理缓存',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="getStorageInfo">查看存储信息</button>
|
||||
<view v-if="storageInfo" class="storage-info">
|
||||
<text>已使用：{{ storageInfo.currentSize }}KB / {{ storageInfo.limitSize }}KB</text>
|
||||
<text>使用率：{{ usagePercent }}%</text>
|
||||
<text>存储的key数量：{{ storageInfo.keys.length }}</text>
|
||||
<view class="key-list">
|
||||
<text v-for="key in storageInfo.keys" :key="key" class="key-item">
|
||||
{{ key }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storageInfo: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
usagePercent() {
|
||||
if (!this.storageInfo) return 0
|
||||
return ((this.storageInfo.currentSize / this.storageInfo.limitSize) * 100).toFixed(2)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStorageInfo() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
this.storageInfo = res
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.storage-info {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.key-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.key-item {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 示例 4: 清理存储空间
|
||||
|
||||
```javascript
|
||||
function clearStorageIfNeeded() {
|
||||
uni.getStorageInfo({
|
||||
success: (res) => {
|
||||
const usagePercent = (res.currentSize / res.limitSize) * 100
|
||||
|
||||
if (usagePercent > 80) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '存储空间不足，是否清理缓存？',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
// 清理非关键数据
|
||||
const importantKeys = ['token', 'userInfo']
|
||||
res.keys.forEach(key => {
|
||||
if (!importantKeys.includes(key)) {
|
||||
uni.removeStorageSync(key)
|
||||
}
|
||||
})
|
||||
uni.showToast({
|
||||
title: '清理完成',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 5: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const storageInfo = uni.getStorageInfoSync()
|
||||
console.log('所有key', storageInfo.keys)
|
||||
console.log('当前大小', storageInfo.currentSize, 'KB')
|
||||
console.log('限制大小', storageInfo.limitSize, 'KB')
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 返回值
|
||||
|
||||
| 参数名 | 类型 | 说明 |
|
||||
|--------|------|------|
|
||||
| keys | Array | 当前 storage 中所有的 key |
|
||||
| currentSize | Number | 当前占用的空间大小，单位 KB |
|
||||
| limitSize | Number | 限制的空间大小，单位 KB |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 可以通过 `keys` 获取所有存储的 key
|
||||
2. `currentSize` 和 `limitSize` 单位都是 KB
|
||||
3. 建议定期检查存储空间使用情况
|
||||
4. 同步版本 `getStorageInfoSync` 性能更好
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfo
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorageinfosync
|
||||
- **清除存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
|
||||
@@ -0,0 +1,200 @@
|
||||
# uni.getStorageSync - 同步获取存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorageSync` 用于从本地缓存中同步获取指定 key 的内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const value = uni.getStorageSync('key')
|
||||
console.log('获取的数据', value)
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取用户信息
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
console.log('用户信息', userInfo)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 2: 获取 Token
|
||||
|
||||
```javascript
|
||||
function getToken() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token')
|
||||
return token || null
|
||||
} catch (err) {
|
||||
console.error('获取Token失败', err)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
console.log('Token存在', token)
|
||||
} else {
|
||||
console.log('未登录')
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="userInfo" class="user-info">
|
||||
<text>用户名：{{ userInfo.name }}</text>
|
||||
<text>邮箱：{{ userInfo.email }}</text>
|
||||
</view>
|
||||
<view v-else>
|
||||
<text>未登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
this.userInfo = userInfo
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取用户信息失败', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装获取函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
get(key, defaultValue = null) {
|
||||
try {
|
||||
const value = uni.getStorageSync(key)
|
||||
return value !== '' ? value : defaultValue
|
||||
} catch (err) {
|
||||
console.error(`获取${key}失败`, err)
|
||||
return defaultValue
|
||||
}
|
||||
},
|
||||
|
||||
getString(key, defaultValue = '') {
|
||||
return this.get(key, defaultValue)
|
||||
},
|
||||
|
||||
getNumber(key, defaultValue = 0) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return Number(value) || defaultValue
|
||||
},
|
||||
|
||||
getBoolean(key, defaultValue = false) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return Boolean(value)
|
||||
},
|
||||
|
||||
getObject(key, defaultValue = {}) {
|
||||
const value = this.get(key, defaultValue)
|
||||
return typeof value === 'object' ? value : defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
const userInfo = storage.getObject('userInfo', {})
|
||||
const token = storage.getString('token', '')
|
||||
const count = storage.getNumber('count', 0)
|
||||
```
|
||||
|
||||
### 示例 5: 检查数据是否存在
|
||||
|
||||
```javascript
|
||||
function hasStorage(key) {
|
||||
try {
|
||||
const value = uni.getStorageSync(key)
|
||||
return value !== '' && value !== null && value !== undefined
|
||||
} catch (err) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
if (hasStorage('userInfo')) {
|
||||
console.log('用户信息存在')
|
||||
} else {
|
||||
console.log('用户信息不存在')
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
|
||||
## 返回值
|
||||
|
||||
| 类型 | 说明 |
|
||||
|------|------|
|
||||
| Any | key 对应的内容 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 同步接口会阻塞后续代码执行，性能比异步接口好
|
||||
2. 如果 key 不存在，返回空字符串
|
||||
3. 建议使用 try-catch 处理错误
|
||||
4. 适合在页面初始化时获取数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
|
||||
- **异步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
|
||||
- **设置存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
|
||||
@@ -0,0 +1,175 @@
|
||||
# uni.getStorage - 获取存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.getStorage` 用于从本地缓存中异步获取指定 key 的内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
console.log('获取的数据', res.data)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 获取用户信息
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data
|
||||
console.log('用户信息', userInfo)
|
||||
// 使用用户信息
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('获取失败', err)
|
||||
// 数据不存在或获取失败
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 获取字符串
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'token',
|
||||
success: (res) => {
|
||||
const token = res.data
|
||||
console.log('Token', token)
|
||||
// 使用 token
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 获取数组
|
||||
|
||||
```javascript
|
||||
uni.getStorage({
|
||||
key: 'shoppingCart',
|
||||
success: (res) => {
|
||||
const cart = res.data || []
|
||||
console.log('购物车', cart)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 封装获取函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
get(key) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getStorage({
|
||||
key: key,
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
if (err.errMsg.includes('data not found')) {
|
||||
resolve(null) // 数据不存在返回 null
|
||||
} else {
|
||||
reject(err)
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.get('userInfo')
|
||||
.then(data => {
|
||||
if (data) {
|
||||
console.log('用户信息', data)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('获取失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 5: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="loadUserInfo">加载用户信息</button>
|
||||
<view v-if="userInfo" class="user-info">
|
||||
<text>用户名：{{ userInfo.name }}</text>
|
||||
<text>邮箱：{{ userInfo.email }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
uni.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
this.userInfo = res.data
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '未登录',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 同步版本
|
||||
|
||||
使用 `uni.getStorageSync` 进行同步获取：
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
console.log('用户信息', userInfo)
|
||||
} else {
|
||||
console.log('数据不存在')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 如果 key 不存在，会触发 fail 回调
|
||||
2. 建议使用 try-catch 处理同步接口的错误
|
||||
3. 获取的数据类型与存储时一致
|
||||
4. 异步接口不会阻塞后续代码执行
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
|
||||
- **设置存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
|
||||
@@ -0,0 +1,160 @@
|
||||
# uni.removeStorage - 删除存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.removeStorage` 用于从本地缓存中异步移除指定 key。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
console.log('删除成功')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 删除单个数据
|
||||
|
||||
```javascript
|
||||
uni.removeStorage({
|
||||
key: 'token',
|
||||
success: () => {
|
||||
console.log('Token 已删除')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('删除失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 退出登录时清除数据
|
||||
|
||||
```javascript
|
||||
function logout() {
|
||||
// 删除用户信息
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
console.log('用户信息已清除')
|
||||
}
|
||||
})
|
||||
|
||||
// 删除 Token
|
||||
uni.removeStorage({
|
||||
key: 'token',
|
||||
success: () => {
|
||||
console.log('Token 已清除')
|
||||
// 跳转到登录页
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 批量删除
|
||||
|
||||
```javascript
|
||||
const keysToRemove = ['userInfo', 'token', 'settings']
|
||||
|
||||
keysToRemove.forEach(key => {
|
||||
uni.removeStorage({
|
||||
key: key,
|
||||
success: () => {
|
||||
console.log(`${key} 已删除`)
|
||||
}
|
||||
})
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<button @click="clearUserData">清除用户数据</button>
|
||||
<button @click="clearAllData">清除所有数据</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
clearUserData() {
|
||||
uni.removeStorage({
|
||||
key: 'userInfo',
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '用户数据已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
clearAllData() {
|
||||
uni.clearStorage({
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '所有数据已清除',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 5: 同步版本
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.removeStorageSync('userInfo')
|
||||
console.log('删除成功')
|
||||
} catch (err) {
|
||||
console.error('删除失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 如果 key 不存在，不会报错
|
||||
2. 建议使用同步版本 `removeStorageSync` 性能更好
|
||||
3. 删除操作是异步的，需要等待 success 回调
|
||||
4. 退出登录时建议清除所有相关数据
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestorage
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#removestoragesync
|
||||
- **清除所有**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#clearstorage
|
||||
@@ -0,0 +1,196 @@
|
||||
# uni.setStorageSync - 同步设置存储数据示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setStorageSync` 用于同步将数据存储在本地缓存中指定的 key 中。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.setStorageSync('key', 'value')
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 存储用户信息
|
||||
|
||||
```javascript
|
||||
try {
|
||||
const userInfo = {
|
||||
name: 'John',
|
||||
age: 30,
|
||||
email: 'john@example.com'
|
||||
}
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 2: 存储 Token
|
||||
|
||||
```javascript
|
||||
function saveToken(token) {
|
||||
try {
|
||||
uni.setStorageSync('token', token)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error('存储Token失败', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
if (saveToken('abc123')) {
|
||||
console.log('Token已保存')
|
||||
}
|
||||
```
|
||||
|
||||
### 示例 3: 在页面中使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<input v-model="username" placeholder="用户名" />
|
||||
<input v-model="email" placeholder="邮箱" />
|
||||
<button @click="saveUserInfo">保存用户信息</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
email: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
saveUserInfo() {
|
||||
try {
|
||||
const userInfo = {
|
||||
username: this.username,
|
||||
email: this.email
|
||||
}
|
||||
uni.setStorageSync('userInfo', userInfo)
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 示例 4: 封装存储函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
set(key, value) {
|
||||
try {
|
||||
uni.setStorageSync(key, value)
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error(`存储${key}失败`, err)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
setString(key, value) {
|
||||
return this.set(key, String(value))
|
||||
},
|
||||
|
||||
setNumber(key, value) {
|
||||
return this.set(key, Number(value))
|
||||
},
|
||||
|
||||
setBoolean(key, value) {
|
||||
return this.set(key, Boolean(value))
|
||||
},
|
||||
|
||||
setObject(key, value) {
|
||||
return this.set(key, value)
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.setString('token', 'abc123')
|
||||
storage.setNumber('count', 10)
|
||||
storage.setBoolean('isLogin', true)
|
||||
storage.setObject('userInfo', { name: 'John' })
|
||||
```
|
||||
|
||||
### 示例 5: 批量存储
|
||||
|
||||
```javascript
|
||||
function saveMultipleData(data) {
|
||||
try {
|
||||
Object.keys(data).forEach(key => {
|
||||
uni.setStorageSync(key, data[key])
|
||||
})
|
||||
return true
|
||||
} catch (err) {
|
||||
console.error('批量存储失败', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
saveMultipleData({
|
||||
token: 'abc123',
|
||||
userInfo: { name: 'John' },
|
||||
settings: { theme: 'dark' }
|
||||
})
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
|--------|------|------|------|
|
||||
| key | String | 是 | 本地缓存中指定的 key |
|
||||
| data | Any | 是 | 需要存储的内容 |
|
||||
|
||||
## 平台兼容性
|
||||
|
||||
| 平台 | 支持情况 |
|
||||
|------|---------|
|
||||
| H5 | ✅ |
|
||||
| 微信小程序 | ✅ |
|
||||
| 支付宝小程序 | ✅ |
|
||||
| 百度小程序 | ✅ |
|
||||
| 字节跳动小程序 | ✅ |
|
||||
| QQ 小程序 | ✅ |
|
||||
| 快手小程序 | ✅ |
|
||||
| App | ✅ |
|
||||
| 快应用 | ✅ |
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 同步接口会阻塞后续代码执行，性能比异步接口好
|
||||
2. 存储的数据类型与设置时一致
|
||||
3. 建议使用 try-catch 处理错误
|
||||
4. 单个 key 允许存储的最大数据长度为 1MB
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
|
||||
- **异步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
|
||||
- **获取存储**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
|
||||
@@ -0,0 +1,160 @@
|
||||
# uni.setStorage - 数据存储示例
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
|
||||
|
||||
## 概述
|
||||
|
||||
`uni.setStorage` 用于将数据存储在本地缓存中指定的 key 中，异步接口。
|
||||
|
||||
## 基础用法
|
||||
|
||||
```javascript
|
||||
uni.setStorage({
|
||||
key: 'userInfo',
|
||||
data: {
|
||||
name: 'John',
|
||||
age: 30
|
||||
},
|
||||
success: () => {
|
||||
console.log('存储成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
### 示例 1: 存储用户信息
|
||||
|
||||
```javascript
|
||||
// 存储用户信息
|
||||
const userInfo = {
|
||||
id: 1,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
avatar: 'https://example.com/avatar.jpg'
|
||||
}
|
||||
|
||||
uni.setStorage({
|
||||
key: 'userInfo',
|
||||
data: userInfo,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 2: 存储字符串
|
||||
|
||||
```javascript
|
||||
uni.setStorage({
|
||||
key: 'token',
|
||||
data: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
|
||||
success: () => {
|
||||
console.log('Token 已保存')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 3: 存储数组
|
||||
|
||||
```javascript
|
||||
const shoppingCart = [
|
||||
{ id: 1, name: '商品1', price: 99 },
|
||||
{ id: 2, name: '商品2', price: 199 }
|
||||
]
|
||||
|
||||
uni.setStorage({
|
||||
key: 'shoppingCart',
|
||||
data: shoppingCart,
|
||||
success: () => {
|
||||
console.log('购物车已保存')
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### 示例 4: 封装存储函数
|
||||
|
||||
```javascript
|
||||
// utils/storage.js
|
||||
const storage = {
|
||||
set(key, data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.setStorage({
|
||||
key: key,
|
||||
data: data,
|
||||
success: () => {
|
||||
resolve()
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
get(key) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getStorage({
|
||||
key: key,
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 使用
|
||||
storage.set('userInfo', { name: 'John' })
|
||||
.then(() => {
|
||||
console.log('存储成功')
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('存储失败', err)
|
||||
})
|
||||
```
|
||||
|
||||
## 同步版本
|
||||
|
||||
使用 `uni.setStorageSync` 进行同步存储：
|
||||
|
||||
```javascript
|
||||
try {
|
||||
uni.setStorageSync('userInfo', {
|
||||
name: 'John',
|
||||
age: 30
|
||||
})
|
||||
console.log('存储成功')
|
||||
} catch (err) {
|
||||
console.error('存储失败', err)
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 存储的数据会被持久化，除非手动删除或清除缓存
|
||||
2. 单个 key 允许存储的最大数据长度为 1MB
|
||||
3. 异步接口不会阻塞后续代码执行
|
||||
4. 建议使用 try-catch 处理同步接口的错误
|
||||
|
||||
## 参考资源
|
||||
|
||||
- **官方文档**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage
|
||||
- **同步版本**: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstoragesync
|
||||
Reference in New Issue
Block a user