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

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

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

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

當(dāng)執(zhí)行了這段代碼之后就會(huì)發(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()得到的是一個(gè)promise對(duì)象，因此使用then方法通過e.data得到緩存區(qū)數(shù)據(jù)
當(dāng)執(zhí)行了這段代碼之后就會(huì)發(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')

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

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

wx.clearStorage()
wx.clearStorageSync()

三、api辨析

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

1.wx.setStorage()

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

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

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

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

2.wx.setStorage()

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

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

}
})

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

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

加載微信個(gè)人信息案例

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({

 /**
 * 頁(yè)面的初始數(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ù)渲染到頁(yè)面中
 wx.setStorage({
  data: res.userInfo.nickName,//name中存入用戶名信息
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl中存入用戶頭像的url地址
  key: 'pictureurl',
 })
 })//同時(shí)將渲染的數(shù)據(jù)緩存
 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載，加載頁(yè)面，觸發(fā)onLoad。此時(shí)就可以將數(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é)果示例，第一次點(diǎn)擊獲取用戶數(shù)據(jù)按鈕后當(dāng)刷新或者關(guān)閉后重啟程序都會(huì)是此頁(yè)面

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

最新評(píng)論