微信小程序 本地數(shù)據(jù)存儲實例詳解

前言

如果您在看此文章之前有過其他程序的開發(fā)經(jīng)驗，那一定會知道一般例如安卓或者蘋果的原生APP都提供了本地的存儲功能，甚至可以使用sqlite數(shù)據(jù)庫來做存儲。可是微信的小程序框架基于微信本身，其實際運行環(huán)境只是在瀏覽器里面，所以不會提供那么豐富的數(shù)據(jù)存儲實力。但html5開始已經(jīng)可以在瀏覽器里面存儲數(shù)據(jù)，好在微信的小程序給這個功能封裝好了，這樣我們可以使用數(shù)據(jù)存儲。

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

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

可以對本地緩存進行設(shè)置、獲取和清理。本地緩存最大為10MB。

上面的set和get都有對應(yīng)的Sync方法，帶Sync的方法為同步方法、不帶Sync的方法為異步方法。

設(shè)置緩存都需要設(shè)置一個key和對應(yīng)的data值，我們在《微信web開發(fā)者工具》中的調(diào)試狀態(tài)下可以點擊調(diào)試窗口的Storage 欄來查看我們緩存在本地的數(shù)據(jù)。

緩存可以保存數(shù)組、數(shù)值、字符串、對象。

設(shè)置緩存

提供setStorage和setStorageSync兩個接口,并且在使用設(shè)置存儲方法時，如果小程序的存儲值當中已經(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接口

因為該方法為同步接口，所以直接設(shè)置key和data：

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

上面兩個demo中我們都使用了字符串緩存，當然我們也可以緩存一個對象，例如：

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

獲取緩存

getSotrage接口

異步接口，所以我們可以定義幾個回調(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)都會給出三個回調(diào):success、fail、complete，在執(zhí)行成功的時候回執(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}

獲取當前存儲總結(jié)