微信小程序 本地数据存储实例详解

微信小程序 本地数据存储实例详解

前言

如果您在看此文章之前有过其他程序的开发经验，那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能，甚至可以使用sqlite数据库来做存储。可是微信的小程序框架基于微信本身，其实际运行环境只是在浏览器里面，所以不会提供那么丰富的数据存储实力。但html5开始已经可以在浏览器里面存储数据，好在微信的小程序给这个功能封装好了，这样我们可以使用数据存储。

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）

wx.getStorage（wx.getStorageSync）、 
wx.clearStorage（wx.clearStorageSync） 

可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

上面的set和get都有对应的Sync方法，带Sync的方法为同步方法、不带Sync的方法为异步方法。

设置缓存都需要设置一个key和对应的data值，我们在《微信web开发者工具》中的调试状态下可以点击调试窗口的Storage 栏来查看我们缓存在本地的数据。

缓存可以保存数组、数值、字符串、对象。

设置缓存

提供setStorage和setStorageSync两个接口,并且在使用设置存储方法时，如果小程序的存储值当中已经存在对应的key的值，那么会使用新的值替换原来的值。

setSotrage接口

wx.setStorage({
 key:"key",
 data:"value",
 success:function(res){console.log(res)},
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)},
})
//Object {errMsg: "setStorage:ok"}
//Object {errMsg: "setStorage:ok"}

setStorageSync接口

因为该方法为同步接口，所以直接设置key和data：

wx.setStorageSync('key', 'value')

上面两个demo中我们都使用了字符串缓存，当然我们也可以缓存一个对象，例如：

wx.setStorage({key:"ob",data:{name:'smallerpig',sex:1,age:18}})

获取缓存

getSotrage接口

异步接口，所以我们可以定义几个回调:

wx.getStorage(
{
 key:'key',
 success:function(res){
  console.log(res)//Object {errMsg: "getStorage:ok", data: "value1"}
 },
 fail:function(res){console.log(res)},
 complete:function(res){console.log(res)}
})

其中，我们可以看出来，微信小程序的很多异步接口的回调都会给出三个回调:success、fail、complete，在执行成功的时候回执行success、complete回调；在执行失败之后会分别执行fail、complete回调。

getSotrageSync接口

该接口为同步接口，所以只需传递对应的key值就可以了。如下列代码：

wx.getStorageSync('ob')
//Object {name: "smallerpig", sex: 1, age: 18}

获取当前存储总结

使用wx.getStorageInfo接口

例如下列代码:

wx.getStorageInfo({
 success: function(res) {
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
 }
//["logs", "r3session", "key"]0: "logs"1: "r3session"2: "key"]
//1
//10240
})

也可以使用同步接口wx.getStorageInfoSync。

缓存的使用

在上一篇文章中，小猪介绍了如何解密通过wx.getUserInfo接口获取到的cryptedData数据。其中的session_key小猪是写在flask的缓存中，缓存的键是写死为:xcx_session_key。在真实环境中我们不能够这样写，因为这样不同的用户获取到的session_key是相同的，所以我们需要给不同的用户附上不同的缓存key。把flask的缓存key返回给微信小程序，小程序中可以固定一个key值，data值保持flask后台给到的值。

说的比较绕，这里需要读者好好理解下。

在flask的代码的使用code获取session_key中，使用下列代码：

@app.route('/user/getuserinfo', methods=['GET', 'POST'])
def getuserinfo():
 code = request.data
 url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code' % (appid, secret, code)
 r = requests.get(url)
 j = json.loads(r.text)
 r3session_key = binascii.hexlify(os.urandom(64))
 cache.set(r3session_key, j['session_key'])
 return r3session_key

接下来，在wx.request的回调中把flask中返回的r3session_key保存起来：

wx.request({
 url: 'https://***.smallerpig.com/user/getuserinfo',
 data: r.code,
 method: 'POST',
 success: function(res){
 wx.setStorageSync('r3session', res.data)
 }
})

再接下来，在调用wx.getUserInfo时将返回的数据加上从微信小程序本地缓存中取到的r3session丢给flask来处理，flask根据来的r3session从本地服务器的flask缓存中取到微信的值解密cryptedData。这才是一个完整的过程。

小程序的getUserInfo代码：

wx.getUserInfo({
 success: function (res) {
 that.globalData.userInfo = res.userInfo
 typeof cb == "function" && cb(that.globalData.userInfo)
 //将本地存储中的r3session值也同样传递到我的服务器，在服务器中找出微信给到我们的session_key
 var r3session = wx.getStorageSync('r3session')
 res.r3session = r3session
 wx.request({
  url: 'https://***.smallerpig.com/user/getuserunionid',
  data: res,
  success: function(res){
  // success
  console.log(res)
  },
 })
 }
})

对应的flask代码：

@app.route('/user/getuserunionid', methods=['GET', 'POST'])
def getuserid():
 r = json.loads(request.data)
 encryptedData = r['encryptedData']
 iv = r['iv']
 xcx_session_key = r['r3session']
 session_key = cache.get(xcx_session_key) # 从缓存中取出对应r3session对应的session_key
 pc = WXBizDataCrypt(appid, session_key)
 return pc.decrypt(encryptedData, iv)

参考官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html

总结

经过几篇文章的介绍，如果您是按照小猪的代码一步一步做的话你应该已经了解小程序开发的大致过程，接下来的重点无非就是熟悉小程序提供给大家的接口，然后根据这些接口来完善我们的业务逻辑。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # 本地数据存储  # 小程序  # 微信小程序中的数据存储实现方式  # 微信小程序：数据存储、传值、取值详解  # 微信小程序数据存储与取值详解  # 微信小程序开发之数据存储 参数传递 数据缓存  # 微信小程序的数据存储与Django等服务发送请求 讲解  # 回调  # 可以使用  # 小猪  # 中取  # 数据存储  # 自己的  # 是一个  # 几个  # 都有  # 运行环境  # 好了  # 您是  # 只需  # 我们可以  # 有过  # 可以通过  # 希望能  # 这才  # 给大家  # 您在 

相关文章： 网站制作费用多少钱,一个网站的运营，需要哪些费用？  制作销售网站教学视频,销售网站有哪些？  网站制作难吗安全吗,做一个网站需要多久时间？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  内部网站制作流程,如何建立公司内部网站？  如何基于云服务器快速搭建网站及云盘系统？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何在橙子建站中快速调整背景颜色？  如何获取开源自助建站系统免费下载链接？  建站主机如何选？高性价比方案全解析  ,网站推广常用方法？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  广州建站公司哪家好？十大优质服务商推荐  如何用wdcp快速搭建高效网站？  建站之星如何快速解决建站难题？  Bpmn 2.0的XML文件怎么画流程图  如何快速完成中国万网建站详细流程？  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  c++怎么用jemalloc c++替换默认内存分配器【性能】  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  如何快速启动建站代理加盟业务？  智能起名网站制作软件有哪些,制作logo的软件？  高防服务器租用如何选择配置与防御等级？  Android使用GridView实现日历的简单功能  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何通过万网虚拟主机快速搭建网站？  如何选择适配移动端的WAP自助建站平台？  建站之星后台密码遗忘或太弱？如何重置与强化？  如何零成本快速生成个人自助网站？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  如何选择服务器才能高效搭建专属网站？  高端智能建站公司优选：品牌定制与SEO优化一站式服务  非常酷的网站设计制作软件,酷培ai教育官方网站？  如何在万网ECS上快速搭建专属网站？  如何通过二级域名建站提升品牌影响力？  建站之星导航配置指南：自助建站与SEO优化全解析  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  网站制作网站,深圳做网站哪家比较好？  网站制作服务平台,有什么网站可以发布本地服务信息？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  音响网站制作视频教程,隆霸音响官方网站？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  高端云建站费用究竟需要多少预算？  网页设计网站制作软件,microsoft office哪个可以创建网页？  平台云上自主建站：模板化设计与智能工具打造高效网站  ,交易猫的商品怎么发布到网站上去？  定制建站流程步骤详解：一站式方案设计与开发指南