【未经作者本人同意,请勿以任何形式转载】

目前,微信给每个小程序提供了10M的本地缓存空间(哎哟妈呀好大)

  1. 有了本地缓存,你的小程序可以做到:

    • 离线应用(已测试在无网络的情况下,可以操作缓存数据)
    • 流畅的用户体验
    • 减少网络请求,节省服务器资源
  2. 哪些数据适合方缓存:
    • 热数据
    • 静态数据(用户数据,服务器授权ID等)
    • 网络地址(图片、文件等网络地址)
    • 分页列表数据及详情内容
  3. 一般的缓存系统采用键值对的方式完成数据插入和读取,通过对key进行一次Hash算法得到一个唯一值,并与value绑定起来;查询的时候对根据Hash后的key查询,算法空间复杂度O(1);
  4. 小程序本地缓存的实现基于上述方式实现。但是数据究竟是存储在ROM,还是存储在RAM后进行持久化,这个问题有待考究。
  5. 对本地缓存数据操作分为同步和异步两种。同步方法有成功回调函数,表示数 据处理成功后的操作。下面是小程序提供本地缓存操作接口:
操作 异步方法 同步方法
插入 wx.setStorage wx.setStorageSync
读取 wx.getStorage wx.getStorageSync
删除 wx.removeStorage wx.removeStorageSync
清空 wx.clearStorage wx.clearStorageSync
获取缓存信息 wx.getStorageInfo wx.getStorageInfoSync

以Sync结尾都是同步方法。同步方法和异步方法的区别是:

  • 同步方法会堵塞当前任务,直到同步方法处理返回。
  • 异步方法不会塞当前任务。

6.下面以插入缓存的两个方法说明同步和异步的区别:

  1. 先调用异步方法,再调用同步方法
Page({
save: function(e){
console.log('开始保存')
wx.setStorage({
key: 'key1',
data: 'data1',
success: function(res){
console.log('异步保存成功')
}
})
wx.setStorageSync('key2', 'data2')
console.log('同步保存成功')
}
})

执行结果:

可以看出,同步方法比异步方法先保存成功,说明异步方法没有阻塞当前任务。

2. 先调用同步方法,再调用异步方法

Page({
save: function(e){
console.log('开始保存')
wx.setStorageSync('key2', 'data2')
console.log('同步保存成功')
wx.setStorage({
key: 'key1',
data: 'data1',
success: function(res){
console.log('异步保存成功')
}
})
}
})

执行结果:

可以看出,异步方法只有等到同步方法执行成功才会执行。

缓存API提供了一个获取本地缓存信息的接口wx.getStorageInfo,有了它,开发者可以在已有api上再次封装,比如加入缓存时间、不覆盖插入、批量删除、判断当前缓存大小等。

最后一个是缓存隔离级别的问题:

  1. 同一手机,不同小程序应用,至少在逻辑存储上肯定不是共享缓存,满足应用级别隔离。
  2. 同一手机,同一个小程序,不同微信用户扫码使用,经测试,也不共享缓存,目前测试条件下,是用户级别隔离。
  3. 同一手机,同一个小程序,同一微信用户两次扫码使用,经测试,是共享缓存。
  4. 同一手机,同一个小程序,不同微信用户切换使用(分别扫码两次),经测试,同一个用户共享缓存,不同用户间不共享缓存。

目前可以推断在真机调试条件下,每个小程序扫码用户都会分配10M的本地缓存。

以上是个人在真机测试得到的结果,结果不一定完全准确,仅供参考。

你也可以关注我的微信公众号『ITNotes』, 一起交流学习 。

小程序QQ交流群:594342242

微信小程序之本地缓存(十)的更多相关文章

  1. 微信小程序之本地缓存

    目前,微信给每个小程序提供了10M的本地缓存空间(哎哟妈呀好大) 有了本地缓存,你的小程序可以做到: 离线应用(已测试在无网络的情况下,可以操作缓存数据) 流畅的用户体验 减少网络请求,节省服务器资源 ...

  2. 微信小程序---存储本地缓存数据

    微信小程序之数据缓存 开发中常用setStorageSync来实现本地数据缓存操作 (1)点击缓存案例: <button bindtap="toStorage">存储& ...

  3. 微信小程序API---数据缓存

    本地数据缓存常用于存储多页面用到的数据,例如用户头像信息. (1)数据存储 wx.setStorage(Object object)与wx.setStorageSync(string key, any ...

  4. 微信小程序把玩(二十八)image组件

    原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...

  5. 微信小程序把玩(二十四)toast组件

    原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...

  6. 微信小程序之数据缓存

    关于缓存,举个示例,假定我不是通过微信授权登录的方式,小程序又是如何识别我登录后的身份呢???效果图: 这个功能我是通过缓存实现的. 关键核心代码如下: wx.setStorage({ key: 'u ...

  7. 微信小程序周报(第十三期)-极乐商店(store.dreawer.com)出品

    重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句 ...

  8. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  9. 微信小程序把玩(三十四)Audio API

    原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.wx.p ...

随机推荐

  1. 把普通对象转换成json格式的对象

    1.什么叫做JSON?JSON只是一种数据格式(它不是一种新的数据类型) var obj = {name: "中国", age: 5000};//->普通格式的对象 var ...

  2. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  3. react引用ant的table组件

    import React from 'react';import '../../css/uicss/UI.css';import 'antd/lib/style/index.less';import ...

  4. 你的USB设备还安全吗?USB的安全性已从根本上被打破!

    前言: USB设备使用方便,但也可能被用来携带恶意软件.病毒,感染计算机系统.通过禁用自动播放功能.杀毒软件查杀.不定期的对设备进行格式化等操作可以确保它是干净的.但它存在的安全问题要比我们想象的更深 ...

  5. 另类的SQL注入方法

    前言:相比基于查询的SQL注入,使用insert.update和delete进行SQL注入显得略显另类 参考自:http://www.exploit-db.com/wp-content/themes/ ...

  6. SharePoint 2010 GridView/SPGridView完全应用系统样式

    自定义开发页面如果用到了GridView或SPGridView默认跟列表的样式是不一样的,如要要一样,需要: 1)aspx <asp:GridView DataKeyNames="ID ...

  7. UITextFeild的用法

    一. 修改占位字符串的 颜色: =======方法一 ====================================== #import "ViewController.h&quo ...

  8. C#命名规则和编码规范

    用Pascal规则来命名属性.方法.事件和类名. public class HelloWorld { public void SayHello(string name) { } } Pascal规则是 ...

  9. python-切片 迭代 生成器

    1 切片操作 >>> L ['aaa', 'bbb', 'ccc', 'ddd'] >>> L[0:3] ['aaa', 'bbb', 'ccc'] >> ...

  10. CSS3 box-sizing

    请在火狐浏览器测试,其他浏览器不一定有效 <!DOCTYPE html > <html > <head> <meta charset="utf-8& ...