开发小程序时,本地存储是绕不开的一个环节,无论是缓存用户偏好、临时数据还是离线内容,它都扮演着关键角色。下面来详细梳理一下微信小程序提供的本地存储相关API,看看同步和异步两种模式下分别有哪些方法可用。

数据支持
需要存储的内容类型有明确限制:只支持原生类型、Date对象,以及那些能够通过JSON.stringify序列化的对象。简单来说,字符串、数字、布尔值、日期、普通对象(不含函数、undefined等)都可以直接存,但复杂循环引用对象就不行了。
方法
微信小程序的本地存储API分为同步和异步两组,同步方法会阻塞后续代码执行直到操作完成,而异步方法则通过回调处理结果,不会阻塞主线程。实际开发中可以根据场景灵活选择,下面分别列出。
同步方法
同步方法需要包裹在try...catch中捕获异常,使用时注意不要在主流程中频繁调用以免阻塞UI。
(1)wx.setStorageSync() — 存储值
try {
wx.setStorageSync('key', 'value')
} catch (e) {
// Do something when catch error
}
(2)wx.removeStorageSync() — 移除指定的值
try {
wx.removeStorageSync('key')
} catch (e) {
// Do something when catch error
}
(3)wx.getStorageSync() — 获取值
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
(4)wx.getStorageInfoSync() — 获取当前 storage 中所有的 key
try {
const res = wx.getStorageInfoSync()
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// Do something when catch error
}
(5)wx.clearStorageSync() — 清除所有的 key
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}
异步方法
异步方法通过回调函数(success、fail、complete)来处理结果,不会阻塞后续代码,适合在用户操作响应较快或需要批量操作时使用。
(1)wx.setStorage() — 存储值
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容。需要注意的是,数据存储生命周期跟小程序本身一致——除非用户主动删除或超过一定时间被自动清理,否则数据会一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorage({
key: "key",
data: "value"
})
(2)wx.removeStorage() — 移除指定的值
wx.removeStorage({
key: 'key',
success (res) {
console.log(res)
}
})
(3)wx.getStorage() — 获取值
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
(4)wx.getStorageInfo() — 获取当前 storage 中所有的 key
wx.getStorageInfo({
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
(5)wx.clearStorage() — 清除所有的 key
wx.clearStorage()
