這篇文章主要介紹微信小程序中緩存的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是專業(yè)的硚口網(wǎng)站建設(shè)公司，硚口接單;提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行硚口網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

微信小程序 緩存

關(guān)于本地緩存

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）

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

2.localStorage 是永久存儲

一、異步緩存

wx.setStorage(OBJECT)

將數(shù)據(jù)存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

從本地緩存中異步獲取指定 key 對應(yīng)的內(nèi)容。

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

異步獲取當(dāng)前storage的相關(guān)信息

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

從本地緩存中異步移除指定 key 。

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

二、同步緩存

wx.setStorageSync(KEY,DATA)

將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容，這是一個同步接口。

wx.getStorageSync(KEY)

從本地緩存中同步獲取指定 key 對應(yīng)的內(nèi)容。

wx.getStorageInfoSync

同步獲取當(dāng)前storage的相關(guān)信息

wx.removeStorageSync(KEY)

從本地緩存中同步移除指定 key 。

三、清理緩存

wx.clearStorage()

清理本地數(shù)據(jù)緩存。

wx.clearStorageSync()

同步清理本地數(shù)據(jù)緩存

關(guān)于同步緩存和異步緩存的區(qū)別

以Sync（同步，同時）結(jié)尾的都是都是同步緩存，二者的區(qū)別是，異步不會阻塞當(dāng)前任務(wù)，同步緩存直到同步方法處理完才能繼續(xù)往下執(zhí)行。

但是一般情況下不要用清除所有的緩存，如果想要清除相應(yīng)的緩存，設(shè)置對應(yīng)的緩存內(nèi)容為空數(shù)組就好

關(guān)于歷史搜索

<input type="text" class="search-icon" placeholder="請輸入要搜索的內(nèi)容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>


<view>
  <view>
    <text style="float:left;" bindtap="deleteHistory">歷史搜索</text>
    <text style="float:right;" bindtap="deleteHistory">刪除搜索歷史</text>
  </view>
  <view>
    <view class="search-list" wx:for="{{searchData}}" wx:key="item">
      <view>{{item == null?'暫無數(shù)據(jù)':item}}</view>
    </view>
  </view>
</view>

頁面

這里有三個綁定事件

bindinput="searchNameInput" 獲取用戶輸入的數(shù)據(jù)

bindtap="setSearchStorage" 設(shè)置本地存儲

bindtap="deleteHistory" 刪除歷史搜索

 //獲取用戶輸入框的值
  searchNameInput:function(e){
    var that = this;
    that.setData({
      inputValue:e.detail.value
    })
  }

e.detail.value就代表了當(dāng)前輸入值

當(dāng)點(diǎn)擊搜索的時候，bindtap="setSearchStorage"

//將用戶輸入的內(nèi)容存入本地緩存,并且將搜索數(shù)據(jù)放到首頁
setSearchStorage:function(){
  var that = this
  if(this.data.inputValue != ''){
    //調(diào)用API向本地緩存存入數(shù)據(jù)
    var searchData = wx.getStorageSync('searchData') || [] 
    searchData.push(this.data.inputValue) 
    wx.setStorageSync('searchData', searchData)

    //讀取用戶搜索商品
    var name = this.data.inputValue
    wx.request({
     url: 'www.shop.com/home/product/search',
     data: {name:name},
     method: 'GET', 
     success: function(res){
        that.setData({
        goodsList: res.data.info,
      })
     },
    })
  }
}

流程這么走：

1.用戶輸入數(shù)據(jù)，點(diǎn)擊搜索

2.如果數(shù)據(jù)不為空，加入（設(shè)置）本地緩存

3.去服務(wù)器搜索用戶想要的數(shù)據(jù)，賦值給這個頁面的變量

4.點(diǎn)擊刪除，去除本地這個key的value

這里的緩存形式的  key=>value

var searchData = wx.getStorageSync('searchData') || []

獲取本地名字為'searchData'的緩存，如果'searchData'這個緩存不存在就相當(dāng)于重新什么一個空數(shù)組，賦值給searchData這個變量

searchData.push(this.data.inputValue)

將用戶輸入的值PUSH進(jìn)searchData這個變量里

wx.setStorageSync('searchData', searchData)

調(diào)用API接口，重新設(shè)置key = 'searchData'的這個緩存的value等于searchData

下面的wx.request是請求數(shù)據(jù)的內(nèi)容，說膩了，印象夠深了。

這里沒有綁定獲取緩存的bindtap，只要獲取到，然后添加到Page里面的data

//從本地獲取歷史搜索數(shù)據(jù)

     var searchData = wx.getStorageSync('searchData')||[]

      this.setData({

        searchData:searchData

      })

 

deleteHistory

//刪除歷史搜索數(shù)據(jù)

  deleteHistory:function(){

    var that = this

    wx.showModal({

    title: '提示',

    content: '是否刪除歷史搜索',

    success: function(res) {

      if (res.confirm) {

        wx.setStorageSync('searchData', []);

        wx.switchTab({

          url: '/pages/index/index',

        })

       }

      }

    })

}

這里是將'searchData'這個key的緩存的value為空數(shù)組，而不是使用API提供的wx.clearStorageSync，這個會清除其他的所有緩存，而我只是想清除這一個key的緩存

以上是“微信小程序中緩存的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：微信小程序中緩存的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://chinadenli.net/article28/hhdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、服務(wù)器托管、用戶體驗、Google、網(wǎng)站設(shè)計、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)