提示：這里可以添加本文要記錄的大概內(nèi)容：
例如：隨著人工智能的不斷發(fā)展，機器學習這門技術(shù)也越來越重要，很多人都開啟了學習機器學習，本文就介紹了機器學習的基礎(chǔ)內(nèi)容。

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、微信數(shù)據(jù)緩存是什么？

在實際開發(fā)中，在用到一個數(shù)據(jù)時，我們需要調(diào)用api接口去得到，然后渲染在頁面中，但是對于一些數(shù)據(jù)，是經(jīng)常需要使用的，如果每次使用時都需要調(diào)用api接口，會十分麻煩。數(shù)據(jù)緩存就解決了這個問題，我們可以在初次調(diào)用某api得到數(shù)據(jù)的同時將數(shù)據(jù)緩存，那么在之后的使用過程中，可以直接通過緩存區(qū)得到，這樣就提高了程序的效率。舉個例子。在第二次登錄微信時，我們還沒有進行登錄操作，但是發(fā)現(xiàn)我們的頭像數(shù)據(jù)已經(jīng)渲染到頁面中，這就是因為再一次登錄時，圖片的地址是從緩存區(qū)中得到的緣故，在本文中也會對此實例進行操作，微信小程序中的數(shù)據(jù)緩存可類比js中的localstorage

二、數(shù)據(jù)緩存api使用方法和辨析

1.存入數(shù)據(jù)

wx.setStorageSync(string key, any data)

wx.setStorageSync("name","張三") 

wx.setStorage(Object object)

wx.setStorage({
 data: "李四",
 key: 'name1',
 }) 

當執(zhí)行了這段代碼之后就會發(fā)現(xiàn)在調(diào)試區(qū)storage中出現(xiàn)以下數(shù)據(jù)

2.讀數(shù)據(jù)

wx.getStorageSync(string key)

var b=wx.getStorageSync('name')
 console.log(b);

Object wx.getStorageInfoSync()

var a=wx.getStorage({
 key: 'name1',
 })
 a.then(e=>{
 console.log(e.data);
 
 })

wx.getStorageInfoSync()得到的是一個promise對象，因此使用then方法通過e.data得到緩存區(qū)數(shù)據(jù)
當執(zhí)行了這段代碼之后就會發(fā)現(xiàn)在調(diào)試區(qū)console中出現(xiàn)以下數(shù)據(jù)

3.刪除數(shù)據(jù) wx.removeStorage(Object object)

 wx.removeStorage({
 key: 'name1',
 })

wx.removeStorageSync(‘name')

wx.removeStorageSync('name')

當執(zhí)行了這段代碼之后就會發(fā)現(xiàn)在調(diào)試區(qū)storage中出現(xiàn)以下數(shù)據(jù)會被刪除

4.刪除全部數(shù)據(jù)（這里不再細說）

wx.clearStorage()
wx.clearStorageSync()

三、api辨析

可以看到上面的多可api可分為兩大類，一種是帶sync的一種是不帶的，其實帶sync的是異步api,而不帶的是同步api,這也是帶sync的這部分api得到的是一個promise對象，這里以wx.setStorageSync() ，wx.setStorage() 做以示例

1.wx.setStorage()

代碼如下（示例）：在wxml中寫入了兩個按鈕，點擊第一個觸發(fā)函數(shù)tongbu，用來演示同步情況

tongbu:function(){
 wx.setStorageSync("name","張五") //同步api
 var a=wx.getStorageSync('name')
 console.log(a);
}

最開始name對應(yīng)的數(shù)據(jù)是張三，在這里我們修改為張五，然后讀取數(shù)據(jù)，發(fā)現(xiàn)console為

說明是單線程順序執(zhí)行，在修改了name后才執(zhí)行了console.log

2.wx.setStorage()

代碼如下（示例）：點擊第一個觸發(fā)函數(shù)yibu，用來演示異步情況

yibu:function(){
 wx.setStorage({
 data: "李柳",
 key: 'name1',
 })
 var a=wx.getStorageSync('name1')
 console.log(a);

}
})

最開始name對應(yīng)的數(shù)據(jù)是李四，在這里我們修改為李柳，然后讀取數(shù)據(jù)，發(fā)現(xiàn)console為

代碼console.log在修改數(shù)據(jù)之后，但是發(fā)現(xiàn)在修改數(shù)據(jù)過后，a沒有改變，說明這里的wx.setStorage()是異步api,在執(zhí)行時，無論這里有無完成執(zhí)行，都會執(zhí)行cinsole.log

加載微信個人信息案例

index.wxss

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

image{
 margin-top: 20px;
 margin-bottom: 20px;
 width: 50px;
 height: 50px;
}

index.wxml

<!--index.wxml-->
<view class="container">
 <button bindtap="getmessage">獲取用戶信息</button>
<view>頭像</view>
<view><image src="{{pictureurl}}"></image></view>
<view><text>用戶名為 {{name}}</text></view>
</view>

index.js

// pages/index/index.js
Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
  name:'張三',
  pictureurl:'../index/4.png'
 },
 getmessage:function(){
 var a=new Promise((resolve,reject)=>{
 wx.getUserInfo({
  success: function(res) {
  resolve(res)
  }
 })
 })//獲取用戶數(shù)據(jù)，前提是已經(jīng)取得了訪問權(quán)限
 a.then(res=>{
 this.setData({
  name:res.userInfo.nickName,
  pictureurl:res.userInfo.avatarUrl
 })//將訪問得到的數(shù)據(jù)渲染到頁面中
 wx.setStorage({
  data: res.userInfo.nickName,//name中存入用戶名信息
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl中存入用戶頭像的url地址
  key: 'pictureurl',
 })
 })//同時將渲染的數(shù)據(jù)緩存
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載，加載頁面，觸發(fā)onLoad。此時就可以將數(shù)據(jù)渲染
 */
 onLoad: function (options) {
 var name=wx.getStorageSync('name')//從緩存中讀取用戶名信息
 var url=wx.getStorageSync('pictureurl')//從緩存中讀取頭像url
 console.log(name);
 console.log(url);
 this.setData({
  name:name,
  pictureurl:url
 })
 
 }
})

渲染后的結(jié)果示例，第一次點擊獲取用戶數(shù)據(jù)按鈕后當刷新或者關(guān)閉后重啟程序都會是此頁面

到此這篇關(guān)于微信小程序開發(fā)數(shù)據(jù)緩存基礎(chǔ)知識辨析及運用實例詳解的文章就介紹到這了,更多相關(guān)微信小程序開發(fā)數(shù)據(jù)緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論