- 浏览: 32903 次
最新评论
目前,微信给每个小程序提供了10M的本地缓存空间
有了本地缓存,你的小程序可以做到:
离线应用(已测试在无网络的情况下,可以操作缓存数据)
流畅的用户体验
减少网络请求,节省服务器资源
哪些数据适合方缓存:
热数据
静态数据(用户数据,服务器授权ID等)
网络地址(图片、文件等网络地址)
分页列表数据及详情内容
一般的缓存系统采用键值对的方式完成数据插入和读取,通过对key进行一次Hash算法得到一个唯一值,并与value绑定起来;查询的时候对根据Hash后的key查询,算法空间复杂度O(1);
小程序本地缓存的实现基于上述方式实现。但是数据究竟是存储在ROM,还是存储在RAM后进行持久化,这个问题有待考究。
对本地缓存数据操作分为同步和异步两种。同步方法有成功回调函数,表示数 据处理成功后的操作。下面是小程序提供本地缓存操作接口:
[td]
操作 异步方法 同步方法
插入 wx.setStorage wx.setStorageSync
读取 wx.getStorage wx.getStorageSync
删除 wx.removeStorage wx.removeStorageSync
清空 wx.clearStorage wx.clearStorageSync
获取缓存信息 wx.getStorageInfo wx.getStorageInfoSync
以Sync结尾都是同步方法。同步方法和异步方法的区别是:
同步方法会堵塞当前任务,直到同步方法处理返回。
异步方法不会塞当前任务。
6.下面以插入缓存的两个方法说明同步和异步的区别:
先调用异步方法,再调用同步方法
Page({
save: function(e){
console.log('开始保存')
wx.setStorage({
key: 'key1',
data: 'data1',
success: function(res){
console.log('异步保存成功')
}
})
wx.setStorageSync('key2', 'data2')
console.log('同步保存成功')
}
})
执行结果:
可以看出,同步方法比异步方法先保存成功,说明异步方法没有阻塞当前任务。
先调用同步方法,再调用异步方法
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上再次封装,比如加入缓存时间、不覆盖插入、批量删除、判断当前缓存大小等。
最后一个是缓存隔离级别的问题:
同一手机,不同小程序应用,至少在逻辑存储上肯定不是共享缓存,满足应用级别隔离。
同一手机,同一个小程序,不同微信用户扫码使用,经测试,也不共享缓存,目前测试条件下,是用户级别隔离。
同一手机,同一个小程序,同一微信用户两次扫码使用,经测试,是共享缓存。
同一手机,同一个小程序,不同微信用户切换使用(分别扫码两次),经测试,同一个用户共享缓存,不同用户间不共享缓存。
目前可以推断在真机调试条件下,每个小程序扫码用户都会分配10M的本地缓存。
以上是个人在真机测试得到的结果,结果不一定完全准确,仅供参考。
原文链接:http://bbs.jointforce.com/topic/23465
有了本地缓存,你的小程序可以做到:
离线应用(已测试在无网络的情况下,可以操作缓存数据)
流畅的用户体验
减少网络请求,节省服务器资源
哪些数据适合方缓存:
热数据
静态数据(用户数据,服务器授权ID等)
网络地址(图片、文件等网络地址)
分页列表数据及详情内容
一般的缓存系统采用键值对的方式完成数据插入和读取,通过对key进行一次Hash算法得到一个唯一值,并与value绑定起来;查询的时候对根据Hash后的key查询,算法空间复杂度O(1);
小程序本地缓存的实现基于上述方式实现。但是数据究竟是存储在ROM,还是存储在RAM后进行持久化,这个问题有待考究。
对本地缓存数据操作分为同步和异步两种。同步方法有成功回调函数,表示数 据处理成功后的操作。下面是小程序提供本地缓存操作接口:
[td]
操作 异步方法 同步方法
插入 wx.setStorage wx.setStorageSync
读取 wx.getStorage wx.getStorageSync
删除 wx.removeStorage wx.removeStorageSync
清空 wx.clearStorage wx.clearStorageSync
获取缓存信息 wx.getStorageInfo wx.getStorageInfoSync
以Sync结尾都是同步方法。同步方法和异步方法的区别是:
同步方法会堵塞当前任务,直到同步方法处理返回。
异步方法不会塞当前任务。
6.下面以插入缓存的两个方法说明同步和异步的区别:
先调用异步方法,再调用同步方法
Page({
save: function(e){
console.log('开始保存')
wx.setStorage({
key: 'key1',
data: 'data1',
success: function(res){
console.log('异步保存成功')
}
})
wx.setStorageSync('key2', 'data2')
console.log('同步保存成功')
}
})
执行结果:
可以看出,同步方法比异步方法先保存成功,说明异步方法没有阻塞当前任务。
先调用同步方法,再调用异步方法
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上再次封装,比如加入缓存时间、不覆盖插入、批量删除、判断当前缓存大小等。
最后一个是缓存隔离级别的问题:
同一手机,不同小程序应用,至少在逻辑存储上肯定不是共享缓存,满足应用级别隔离。
同一手机,同一个小程序,不同微信用户扫码使用,经测试,也不共享缓存,目前测试条件下,是用户级别隔离。
同一手机,同一个小程序,同一微信用户两次扫码使用,经测试,是共享缓存。
同一手机,同一个小程序,不同微信用户切换使用(分别扫码两次),经测试,同一个用户共享缓存,不同用户间不共享缓存。
目前可以推断在真机调试条件下,每个小程序扫码用户都会分配10M的本地缓存。
以上是个人在真机测试得到的结果,结果不一定完全准确,仅供参考。
原文链接:http://bbs.jointforce.com/topic/23465
发表评论
-
微信小程序之提高应用速度小技巧
2017-03-17 17:08 10111、提高页面加载速度 ... -
微信小程序支付(java后端)
2017-02-27 14:38 10307第一步 进入小程序,下单,请求下单支付,调用小程序登录AP ... -
高效编写微信小程序
2017-02-22 15:26 426微信小程序是一个工程,就和盖房子一样,打好了地基,才能保证后续 ... -
微信小程序开放部分模糊搜索,你怎么看?
2017-02-13 16:22 365今天看到一则新闻,微信小程序开始开放模糊搜索了,所以亲自测试了 ... -
微信小程序编写tabBar模板,map组件markers属性动态初始化
2017-02-07 16:04 2100一:编写tabBar模板 众所周知,微信小程序的tabBar ... -
目前为止小程序审核不通过原因整理汇总
2017-01-23 14:57 8491、小程序简介没有介绍小程序功能 2、类目与页面提供的内容不一 ... -
微信小程序之图书管理系统(wepy版)
2017-01-19 14:42 10422016年小程序的推出,刷爆了朋友圈。作为一名好奇的程序猿 ... -
微信小程序form组件
2017-01-18 15:29 1001form 组件 表单 主要属性: 效果图: form. ... -
wafer-master小程序
2017-01-13 15:00 551wafer-master小程序 1、Centos 重启ngin ... -
信小程序参数二维码的8大使用场景
2017-01-12 15:13 650一、小程序参数二维码的8大使用场景 1 地推。 使用 ... -
小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件...
2017-01-06 14:46 517用户反馈是小程序开发 ... -
小程序是微信最后的机会吗?它能做多大?
2017-01-05 15:46 488微信小程序又刷屏了。 ... -
获得session_key和openId(加解密、签名系列)
2016-12-26 15:57 9811:session_key和openId是什么?session ... -
5个关键词看小程序和App的UI设计异同
2016-12-23 14:20 479关键词一:友好礼貌对应于苹果:Less is more 苹果在 ... -
微信小程序正式发布官方视觉组件库,传递了怎样的信号?
2016-12-21 17:16 48012月16日,微信正式发布了WeUI.js动态视觉组件库。We ... -
微信小程序canvas组件简单运用之涂鸦
2016-12-19 14:17 483源码 index.html <view class ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:58 3082016年11月3日,“小程 ... -
深度加速:微信小程序将成为下一个风口
2016-12-09 16:55 4052016年11月3日,“小程序 ...
相关推荐
目前,微信给每个小程序提供了10M的本地缓存空间 有了本地缓存,你的小程序可以做到: 离线应用(已测试在无网络的...小程序本地缓存的实现基于上述方式实现。但是数据究竟是存储在ROM,还是存储在RAM后进行持久化,这
微信小程序接口封装,以及本地缓存方法封装和使用
本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考,具体如下: wxml中的写法 注意: 1. 使用wx:if={{condition}} wx:else实现图标的切换效果; 2. 为图片绑定点击事件bindtap=to...
3.wx.removeStorage接口函数:这个接口函数用于从本地缓存中异步删除指定key对应内容 清除前: 清除后: 4.wx.removeStorageSync接口函数:这个函数用于从本地缓存中同步删除指定key对应的内容 清除前: 清除...
主要介绍了微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解的相关资料,需要的朋友可以参考下
微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || [])...
主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下
点击‘我的’时,我让它从控制台打印出student缓存中传过来的数据,如下: {no: "1635050601", name: "张三", sex: "", email: "123@qq.com", classid: "100000-1602", …} classid:"100000-1602" classname:"16级...
每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地...
关于本地缓存1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10 ... 关于本地...
本文给大家分享的是如何在微信小程序中播放缓存到本地的音频文件的方法,区分了IOS和安卓的不同策略,非常不错,推荐给大家
小程序之所以能有优秀流畅的表现,另一方面是依托微信宿主,从网络层面保证充足的带宽和速度响应,要知道当年为了对抗MSN。QQ单点突破,对网络基础设置到技术架构做了众多的优化,才有了后来腾讯云、微信这样快速...
微信小程序可以通过wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 wx.setStorage()——...
数据如: [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx....