94 lines
2.5 KiB
Markdown
94 lines
2.5 KiB
Markdown
# 小程序中的本地存储
|
||
|
||
微信小程序中的本地存储基本上也和 localStorage 是类似的，分为读和写：
|
||
|
||
- wx.getStorage（异步）
|
||
- wx.getStorageSync（同步）
|
||
- wx.setStorage（异步）
|
||
- wx.setStorageSync（同步）
|
||
|
||
|
||
|
||
**读取数据**
|
||
|
||
异步的读取，接收一个配置对象，对象里面首先有 key，表示你要读取哪一个数据，因为是异步，所以读取到的数据会传给 success 回调函数，如果读取失败，那么会触发 fail 回调函数
|
||
|
||
```js
|
||
wx.getStorage({
|
||
key : ...,
|
||
success(){
|
||
// 读取成功后的回调
|
||
},
|
||
fail(){
|
||
// 读取失败时的回调
|
||
}
|
||
})
|
||
```
|
||
|
||
|
||
|
||
同步的读取，直接将读取到的值取出来使用即可：
|
||
|
||
```js
|
||
var value = wx.getStorageSync(key);
|
||
```
|
||
|
||
|
||
|
||
**写入数据**
|
||
|
||
写入实际上也很简单，首先我们来看一下异步写入，使用到的是 wx.setStorage
|
||
|
||
```js
|
||
wx.setStorage({
|
||
key : ...,
|
||
data : ..., // 要写入的数据
|
||
success(){
|
||
// 写入成功后的回调
|
||
},
|
||
fail(){
|
||
// 写入失败时的回调
|
||
}
|
||
})
|
||
```
|
||
|
||
如果是同步写入，传入两个参数，如下：
|
||
|
||
```js
|
||
wx.setStorageSync('key', 'value2')
|
||
```
|
||
|
||
|
||
|
||
从 2.21.3 版本开始，往本地存储写入数据时，可以进行一个加密的操作，只需要配置 encrypt 为 true 即可。
|
||
|
||
但是有一些注意事项：
|
||
|
||
- 只有异步的存储支持加密（因为加密的时候，回调耗时会增加，所以只能采用异步的方式）
|
||
- 如果进行了加密存储，在获取数据的时候，同样需要将 encrypt 设置为 true 进行解密
|
||
- 因为加密后字符串的长度会膨胀，所以每个 key 最大存储的长度变为了 0.7MB，最大的存储上线由之前的 10MB变为了 7.1MB
|
||
|
||
|
||
|
||
**缓存限制和隔离**
|
||
|
||
- 不同小程序的本地缓存空间是分开的，即便是同一个小程序，但是不同的用户之间，也是分开的
|
||
- 每个小程序的缓存空间的上限为10M，如果超过了10M再往缓存里面写入，就会触发 fail 的回调
|
||
|
||
|
||
|
||
除了上面介绍到的获取和设置本地数据，常用还有：
|
||
|
||
- wx.removeStorage：从本地缓存中移除指定 key。
|
||
- wx.removeStorageSync：上面方法的同步版本
|
||
- wx.clearStorage：清空整个本地存储
|
||
- wx.clearStorageSync：上面方法的同步版本
|
||
|
||
|
||
|
||
本节课结束后，请通读官方文档对应的：*https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a2c7c9f4a981b0086bd31e5b40a*
|
||
|
||
特别是是官方文档举了两个使用本地存储的需求案例：
|
||
|
||
- 利用本地缓存提前渲染界面
|
||
- 缓存用户登录态SessionId |