微信小程式中快取的解析

不言
發布: 2018-06-23 14:41:30
原創
2819 人瀏覽過

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

微信小程式快取

關於本機快取

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 != &#39;&#39;){
    //调用API向本地缓存存入数据
    var searchData = wx.getStorageSync(&#39;searchData&#39;) || [] 
    searchData.push(this.data.inputValue) 
    wx.setStorageSync(&#39;searchData&#39;, searchData)

    //读取用户搜索商品
    var name = this.data.inputValue
    wx.request({
     url: &#39;www.shop.com/home/product/search&#39;,
     data: {name:name},
     method: &#39;GET&#39;, 
     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


這裡是將'searchData '這個key的快取的value為空數組,而不是使用API​​提供的wx.clearStorageSync,這個會清除其他的所有緩存,而我只是想清除這一個key的緩存

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

相關推薦:

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板