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

微信⼩程序本地数据存储实例详解
微信⼩程序本地数据存储实例详解
前⾔
如果您在看此⽂章之前有过其他程序的开发经验，那⼀定会知道⼀般例如安卓或者苹果的原⽣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:///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://***/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) {
erInfo = erInfo
typeof cb == "function" && cb(erInfo)
//将本地存储中的r3session值也同样传递到我的服务器，在服务器中找出微信给到我们的session_key
var r3session = wx.getStorageSync('r3session')
res.r3session = r3session
wx.request({
url: 'https://***/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)
总结
经过⼏篇⽂章的介绍，如果您是按照⼩猪的代码⼀步⼀步做的话你应该已经了解⼩程序开发的⼤致过程，接下来的重点⽆⾮就是熟悉⼩程序提供给⼤家的接⼝，然后根据这些接⼝来完善我们的业务逻辑。

感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！。