微信小程式中快取的解析

這篇文章主要介紹了微信小程式快取（本地快取、非同步快取、同步快取）詳解的相關資料,需要的朋友可以參考下

微信小程式快取

關於本機快取

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

##）

##可以對本機快取進行設定、取得和清理。本機快取最大為10MB

2.localStorage 是永久儲存

一、非同步快取

wx. setStorage(OBJECT)

將資料儲存在本機快取中指定的key 中，會覆寫原來該key 對應的內容

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

從本機快取中非同步取得指定key 對應的內容。

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

非同步取得目前storage的相關資訊

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 對應的內容，這是一個同步介面。

wx.getStorageSync(KEY)

#從本機快取中同步取得指定 key 對應的內容。

wx.getStorageInfoSync

同步取得目前storage的相關資訊

wx.removeStorageSync(KEY)

#從本機快取中同步移除指定key 。

三、清理快取wx.clearStorage()

清理本機資料快取。

wx.clearStorageSync()

同步清理本機資料快取

關於同步快取和非同步快取的差異

以Sync（同步，同時）結尾的都是同步緩存，二者的差異是，非同步不會阻塞目前任務，同步快取直到同步方法處理完才能繼續往下執行。

但是一般情況下不要用清除所有的緩存，如果想要清除對應的緩存，設定對應的快取內容為空數組就好

 關於歷史搜尋

<input type="text" class="search-icon" placeholder="请输入要搜索的内容" 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?&#39;暂无数据&#39;:item}}</view>
    </view>
  </view>
</view>

 頁面

#這裡有三個綁定事件

bindinput=" searchNameInput" 取得使用者輸入的資料

bindtap="setSearchStorage" 設定本機儲存

bindtap="deleteHistory" 刪除歷史搜尋

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

e.detail.value就代表了当前输入值

 點擊搜尋的時候，bindtap="setSearchStorage"

##

//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
  var that = this
  if(this.data.inputValue != ''){
    //调用API向本地缓存存入数据
    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.用戶輸入數據，點擊搜尋

2.如果數據不為空，加入（設定）本地快取3.去伺服器搜尋用戶想要的數據，賦值給這個頁面的變數

4.點選刪除，去除本機這個key的value

這裡的快取形式的  key=>value

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

取得本機名字為'searchData'的緩存，如果'searchData'這個快取不存在就相當於重新什麼一個空數組，賦值給searchData這個變數

searchData.push(this.data.inputValue)

將使用者輸入的值PUSH進searchData這個變數裡

wx.setStorageSync('searchData', searchData)

#呼叫API接口，重新設定key = 'searchData'的這個快取的value等於searchData

下面的wx.request是請求資料的內容，說膩了，印象夠深了。 這裡沒有綁定取得快取的bindtap，只要取得到，然後加入到Page裡面的data

//从本地获取历史搜索数据

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

      this.setData({

        searchData:searchData

      })

 

deleteHistory

//删除历史搜索数据

  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為空數組，而不是使用API​​提供的wx.clearStorageSync，這個會清除其他的所有緩存，而我只是想清除這一個key的緩存

以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

###微信小程序 彈出視窗自訂的程式碼############微信小程式的訊息提示方塊的實作###################### ####

以上是微信小程式中快取的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！