微信小程序 本地?cái)?shù)據(jù)存儲實(shí)例詳解
微信小程序 本地?cái)?shù)據(jù)存儲實(shí)例詳解
前言
如果您在看此文章之前有過其他程序的開發(fā)經(jīng)驗(yàn)，那一定會知道一般例如安卓或者蘋果的原生APP都提供了本地的存儲功能，甚至可以使用sqlite數(shù)據(jù)庫來做存儲?？墒俏⑿诺男〕绦蚩蚣芑谖⑿疟旧恚鋵?shí)際運(yùn)行環(huán)境只是在瀏覽器里面，所以不會提供那么豐富的數(shù)據(jù)存儲實(shí)力。但html5開始已經(jīng)可以在瀏覽器里面存儲數(shù)據(jù)，好在微信的小程序給這個(gè)功能封裝好了，這樣我們可以使用數(shù)據(jù)存儲。
每個(gè)微信小程序都可以有自己的本地緩存，可以通過 wx.setStorage（wx.setStorageSync）
wx.getStorage（wx.getStorageSync）、 wx.clearStorage（wx.clearStorageSync）
可以對本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。
上面的set和get都有對應(yīng)的Sync方法，帶Sync的方法為同步方法、不帶Sync的方法為異步方法。
設(shè)置緩存都需要設(shè)置一個(gè)key和對應(yīng)的data值，我們在《微信web開發(fā)者工具》中的調(diào)試狀態(tài)下可以點(diǎn)擊調(diào)試窗口的Storage 欄來查看我們緩存在本地的數(shù)據(jù)。
緩存可以保存數(shù)組、數(shù)值、字符串、對象。
設(shè)置緩存
提供setStorage和setStorageSync兩個(gè)接口,并且在使用設(shè)置存儲方法時(shí)，如果小程序的存儲值當(dāng)中已經(jīng)存在對應(yīng)的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接口
因?yàn)樵摲椒橥浇涌冢灾苯釉O(shè)置key和data：
wx.setStorageSync('key', 'value')
上面兩個(gè)demo中我們都使用了字符串緩存，當(dāng)然我們也可以緩存一個(gè)對象，例如：
wx.setStorage({key:"ob",data:{name:'smallerpig',sex:1,age:18}})
獲取緩存
getSotrage接口
異步接口，所以我們可以定義幾個(gè)回調(diào):
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)}
})
其中，我們可以看出來，微信小程序的很多異步接口的回調(diào)都會給出三個(gè)回調(diào):success、fail、complete，在執(zhí)行成功的時(shí)候回執(zhí)行success、complete回調(diào)；在執(zhí)行失敗之后會分別執(zhí)行fail、complete回調(diào)。
getSotrageSync接口
該接口為同步接口，所以只需傳遞對應(yīng)的key值就可以了。如下列代碼：
wx.getStorageSync('ob')
//Object {name: "smallerpig", sex: 1, age: 18}
獲取當(dāng)前存儲總結(jié)
使用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數(shù)據(jù)。其中的session_key小豬是寫在flask的緩存中，緩存的鍵是寫死為:xcx_session_key。在真實(shí)環(huán)境中我們不能夠這樣寫，因?yàn)檫@樣不同的用戶獲取到的session_key是相同的，所以我們需要給不同的用戶附上不同的緩存key。把flask的緩存key返回給微信小程序，小程序中可以固定一個(gè)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的回調(diào)中把flask中返回的r3session_key保存起來：
wx.request({
url: 'https://***.smallerpig.com/user/getuserinfo',
data: r.code,
method: 'POST',
success: function(res){
wx.setStorageSync('r3session', res.data)
}
})
再接下來，在調(diào)用wx.getUserInfo時(shí)將返回的數(shù)據(jù)加上從微信小程序本地緩存中取到的r3session丟給flask來處理，flask根據(jù)來的r3session從本地服務(wù)器的flask緩存中取到微信的值解密cryptedData。這才是一個(gè)完整的過程。
小程序的getUserInfo代碼：
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
//將本地存儲中的r3session值也同樣傳遞到我的服務(wù)器，在服務(wù)器中找出微信給到我們的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)
},
})
}
})
對應(yīng)的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) # 從緩存中取出對應(yīng)r3session對應(yīng)的session_key
pc = WXBizDataCrypt(appid, session_key)
return pc.decrypt(encryptedData, iv)
參考官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html
總結(jié)
經(jīng)過幾篇文章的介紹，如果您是按照小豬的代碼一步一步做的話你應(yīng)該已經(jīng)了解小程序開發(fā)的大致過程，接下來的重點(diǎn)無非就是熟悉小程序提供給大家的接口，然后根據(jù)這些接口來完善我們的業(yè)務(wù)邏輯。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript函數(shù)式編程Thunk原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
基于JavaScript代碼實(shí)現(xiàn)微信掃一掃下載APP
有很多人在做微信的掃一掃下載。但是在微信更新之后微信將該功能給禁止掉了，也不能說是全面禁止吧，因?yàn)轵v訊、微信是一家嘛，通過應(yīng)用寶審核的應(yīng)用好像還是可以通過掃一掃直接下載的，下面通過本篇文章給大家介紹微信掃一掃下載app的代碼片段，感興趣的朋友一起看看吧2015-12-12
Javascript使用integrity屬性進(jìn)行安全驗(yàn)證
這篇文章主要介紹了Javascript使用integrity屬性進(jìn)行安全驗(yàn)證，在html中，script標(biāo)簽可以通過src屬性引入一個(gè)js文件，引入的js文件可以是本地的，也可以是遠(yuǎn)程的，下面我們一起來看看文章詳細(xì)內(nèi)容2021-11-11
這篇文章主要為大家介紹了Fabric.js?監(jiān)聽元素是否相交重疊的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
You-Dont-Know-JS詞法作用域及兩種常見的模型學(xué)習(xí)文檔
這篇文章主要為大家介紹了JS?詞法作用域及兩種常見的模型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁面炫酷的時(shí)鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Umi4集成阿里低代碼框架lowcode-engine實(shí)現(xiàn)
這篇文章主要為大家介紹了Umi4集成阿里低代碼框架lowcode-engine實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信小程序 數(shù)組中的push與concat的區(qū)別
這篇文章主要介紹了微信小程序 數(shù)組中的push與concat的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了JS遞歸遍歷查詢是否有權(quán)限示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了Fabric.js?樣式不更新解決方法案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02