文章目录
1. 官方文档指南：
**同步的4个方法**
功能描述
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
参数
string key
本地缓存中指定的 key
any data
需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
注意
storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。
示例代码
try {
wx.setStorageSync('name', '张三')
} catch (e) {
}
功能描述
从本地缓存中同步获取指定 key 的内容。
参数
string key
本地缓存中指定的 key
返回值
any
key对应的内容
注意
storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。
示例代码
try {
var value = wx.getStorageSync('name')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
- removeStorageSync：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.removeStorageSync.html
功能描述
从本地移除指定 key 的数据
参数
string key
本地缓存中指定的 key
示例代码
try {
wx.removeStorageSync('name')
} catch (e) {
// Do something when catch error
}
- clearStorageSync：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.clearStorageSync.html
功能描述
从本地移除，清空全部的数据
示例代码
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}
**异步的4个方法**
功能描述
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| key | string | 是 |
本地缓存中指定的 key | |
| data | any | 是 |
需要存储的内容。只支持原生类型、Date及能够通过JSON.stringify序列化的对象。 | |
| encrypt | Boolean | false | 是否开启加密存储。只有异步的setStorage接口支持开启加密存储。开启后，将会对data使用AES128加密，接口调用耗时将会增加。若开启加密存储，setStorage和getStorage后的数据比原始数据膨胀1.4倍，因此开启encrypt的情况，单个key允许存储的最大数据长度为0.7MB，所有数据存储上限为7.1MB | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.setStorage({
key:"key",
data:"value"
})
功能描述
从本地缓存中异步获取指定 key 的内容。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| key | string | 是 |
本地缓存中指定的 key | |
| encrypt | Boolean | false | 是否开启加密存储。只有异步的 getStorage 接口支持开启加密存储。开启后，将会对 data 使用 AES128 解密，接口调用耗时将会增加。若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
功能描述
从本地缓存中移除指定 key。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| key | string | 是 |
本地缓存中指定的 key | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.removeStorage({
key: 'key',
success (res) {
console.log(res)
}
})
功能描述
清理本地数据缓存。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.clearStorage()
2. 封装
- 封装的意义：
在项目开发工程中，我们经常会频繁的使用到一些API。如果每次使用直调调用API的话，会导致代码冗余，很多的代码都在重复使用，所以我们要进行封端
3. 实现步骤
- 在项目先新建文件夹取名叫
utils然后在utlis文件夹内新建storageUtils.js文件。目录结构如下图所示：
- 封装实现过程
storageUtils.js
/**
* 存储数据
* @param {*} key 本地缓存中指定的 key
* @param {*} value 需要缓存的数据
*/
export const setStorage = (key, value) => {
try {
wx.setStorageSync(key, value)
} catch (error) {
console.error(`存储指定${
key}数据发生了异常`, error)
}
}
/**
* 从本地读取指定 key 的数据
* @param {*} key
*/
export const getStorage = (key) => {
try {
const value = wx.getStorageSync(key)
if (value) {
return value
}
} catch (error) {
console.error(`读取指定${
key}数据发生了异常`, error)
}
}
/**
* 从本地移除指定 key 的数据
* @param {*} key
*/
export const removeStorage = (key) => {
try {
wx.removeStorageSync(key)
} catch (error) {
console.error(`移除指定${
key}数据发生了异常`, error)
}
}
/**
* 从本地移除，清空全部的数据
*/
export const clearStorage = () => {
try {
wx.clearStorageSync()
} catch (error) {
console.error(`清空，清空数据发生了异常`, error)
}
}
/**
* 异步将数据存储到本地
* @param {*} key 本地缓存中指定的 key
* @param {*} data 需要缓存的数据
*/
export const asyncSetStorage = (key, data) => {
return new Promise((resolve) => {
wx.setStorage({
key,
data,
complete(res) {
resolve(res)
}
})
})
}
/**
*异步从本地获取指定 key 的数据
* @param {*} key 本地缓存中指定的 key
*/
export const asyncGetStorage = (key) => {
return new Promise((resolve) => {
wx.getStorage({
key,
complete(res) {
resolve(res)
}
})
})
}
/**
*异步从本地移除指定 key 的数据
* @param {*} key 本地缓存中指定的 key
*/
export const asyncRemoveStorage = (key) => {
return new Promise((resolve) => {
wx.removeStorage({
key,
complete(res) {
resolve(res)
}
})
})
}
/**
*异步从本地移除，清空全部的数据
*/
export const asyncClearStorage = () => {
return new Promise((resolve) => {
wx.clearStorage({
complete(res) {
resolve(res)
}
})
})
}
温馨提示：
上面每个方法中都使用到了export 关键字，因为需要在其他js文件中使用，所以要export 先导出，然后在其它需要使用到的js文件中import导入
4.如何使用？
- 使用前先
import导入
// app.js
//同步使用
// import {setStorage,getStorage,removeStorage,clearStorage} from './utils/storageUtils'
//异步使用
import {
asyncSetStorage, asyncGetStorage, asyncRemoveStorage, asyncClearStorage } from './utils/storageUtils'
App({
onShow() {
//同步使用===============================================
// setStorage('name','王五')
// setStorage('age',20)
// const value = getStorage('name')
// console.log(value)
// removeStorage('name')
// clearStorage()
//异步使用===============================================
// asyncSetStorage('name', 'wangwu').then((res)=>{
// console.log(res)
// })
// asyncSetStorage('age', 20).then((res)=>{
// console.log(res)
// })
// asyncGetStorage('name').then((res=>{
// console.log(res.data)
// }))
// asyncRemoveStorage('age').then((res)=>{
// console.log(res)
// })
// asyncClearStorage().then((res) => {
// console.log(res)
// })
}
})
温馨提示：
import {setStorage,getStorage,removeStorage,clearStorage} from ‘./utils/storageUtils’
注意 from 的路径（./utils/storageUtils）一定要指向正确