微信小程序数据存储
参考微信官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
小程序的使用场景
微信小程序在获取用户授权后,获取用户的昵称和头像且会从数据库查询两个值显示到首页页面。(token,code)已经取得授权的情况下刷新,可以不弹框直接获取昵称和头像。此时也需要将数据库中的值显示到首页页面。显然,再次向后台发出请求,获取数据库中的值是无法实现的。因为在页面显示的变量名是固定的,两次请求返回的值赋给同一个变量无法实现,且网络请求的先后顺序也不能确定。【此种情况,就需要将首次查询(点击授权按钮)的值存入到本地缓存中】当再次刷新时,将缓存中的值显示到页面上。
HTML5出现之前,缓存一般都是用cookie,但是cookie的存储空间太小。于是,HTML以后又5增加了新的缓存机制,即localStorage 和 sessionStorage,具体的介绍就不在多说。在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难。
wx.setStorageSync(string key, any data) 【wx.setStorage 的同步版本】
示例代码
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
参数:
key : 本地缓存中指定的(string)
data: 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因
存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,
所有数据存储上限为 10MB。
示例代码
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }
参数
属性 | 类型 | 默认值 | 必填 | 说明 |
key | string | 是 | 本地缓存中指定的 key | |
data | any | 是 | 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。 | |
success | function | 是 | 接口调用成功的回调函数 | |
fail | function | 是 | 接口调用失败的回调函数 | |
complete | function | 是 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.removeStorageSync(string key) 【wx.removeStorage 的同步版本】
示例代码
wx.removeStorage({
key: 'key',
success (res) {
console.log(res)
}
})
try {
wx.removeStorageSync('key')
} catch (e) {
// Do something when catch error
}
参数:
key :本地缓存中指定的 key(string )
wx.removeStorage(Object object) 【从本地缓存中移除指定 key】
代码示例
wx.removeStorage({
key: 'key',
success (res) {
console.log(res)
}
})
try {
wx.removeStorageSync('key')
} catch (e) {
// Do something when catch error
}
参数:
属性 | 类型 | 默认值 | 必填 | 说明 |
key | string | 是 | 本地缓存中指定的 key | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
any wx.getStorageSync(string key) 【wx.getStorage 的同步版本】
代码示例
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
参数:key:本地缓存中指定的 key(string)
返回值
data: key对应的内容
Object wx.getStorageInfoSync() 【wx.getStorageInfo 的同步版本】
代码示例
参数 ------- 返回值
wx.getStorageInfo({
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
try {
const res = wx.getStorageInfoSync()
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// Do something when catch error
}
属性 | 类型 | 说明 |
keys | Array. | 当前 storage 中所有的 key |
currentSize | number | 当前占用的空间大小, 单位 KB |
limitSize | number | 限制的空间大小,单位 KB |
wx.getStorageInfo(Object object) 【异步获取当前storage的相关信息】
代码示例
wx.getStorageInfo({
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
try {
const res = wx.getStorageInfoSync()
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// Do something when catch error
}
参数
属性 | 类型 | 默认值 | 必填 | 说明 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
|Object object
属性 | 类型 | 说明 |
keys | Array. | 当前 storage 中所有的 key |
currentSize | number | 当前占用的空间大小, 单位 KB |
limitSize | number | 限制的空间大小,单位 KB |
wx.getStorage(Object object) 【从本地缓存中异步获取指定 key 的内容】
代码示例
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}
参数 Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
key | string | 是 | 本地缓存中指定的 key | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
参数Object res
属性 | 类型 | 说明 |
data | any | key对应的内容 |
####### wx.clearStorageSync() 【wx.clearStorage 的同步版本】
代码示例
wx.clearStorage()
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}
wx.clearStorage(Object object) 【清理本地数据缓存】
示例代码
wx.clearStorage()
try {
wx.clearStorageSync()
} catch(e) {
// Do something when catch error
}
参数 Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |