欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 緩存(本地緩存、異步緩存、同步緩存)詳解

 更新時(shí)間:2017年01月17日 11:36:37   投稿:lqh  
這篇文章主要介紹了微信小程序 緩存(本地緩存、異步緩存、同步緩存)詳解的相關(guān)資料,需要的朋友可以參考下

微信小程序 緩存

關(guān)于本地緩存

1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)

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

2.localStorage 是永久存儲(chǔ)

一、異步緩存

wx.setStorage(OBJECT)

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

wx.setStorage({

 key:"key",

 data:"value"

})

 

wx.getStorage(OBJECT)

從本地緩存中異步獲取指定 key 對(duì)應(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 存儲(chǔ)在本地緩存中指定的 key 中,會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容,這是一個(gè)同步接口。

wx.getStorageSync(KEY)

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

wx.getStorageInfoSync

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

wx.removeStorageSync(KEY)

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

三、清理緩存

wx.clearStorage()

清理本地?cái)?shù)據(jù)緩存。

wx.clearStorageSync()

同步清理本地?cái)?shù)據(jù)緩存

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

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

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

 關(guān)于歷史搜索

<input type="text" class="search-icon" placeholder="請(qǐng)輸入要搜索的內(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?'暫無(wú)數(shù)據(jù)':item}}</view>
    </view>
  </view>
</view>

 頁(yè)面

這里有三個(gè)綁定事件

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

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

bindtap="deleteHistory" 刪除歷史搜索

 

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

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

 

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

//將用戶輸入的內(nèi)容存入本地緩存,并且將搜索數(shù)據(jù)放到首頁(yè)
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ù),賦值給這個(gè)頁(yè)面的變量

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

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

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

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

searchData.push(this.data.inputValue)

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

wx.setStorageSync('searchData', searchData)

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

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

這里沒(mé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'這個(gè)key的緩存的value為空數(shù)組,而不是使用API提供的wx.clearStorageSync,這個(gè)會(huì)清除其他的所有緩存,而我只是想清除這一個(gè)key的緩存

感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

  • JS前端接口請(qǐng)求參數(shù)混淆方案分享

    JS前端接口請(qǐng)求參數(shù)混淆方案分享

    這篇文章主要為大家介紹了JS前端接口請(qǐng)求參數(shù)混淆方案分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • JS中的四種數(shù)據(jù)類型判斷方法

    JS中的四種數(shù)據(jù)類型判斷方法

    js有多種數(shù)據(jù)類型(Number(數(shù)值)、String(字符串)、Boolean(布爾值)、Null、Undefined、Symbol、Object、函數(shù)等),在開(kāi)發(fā)過(guò)程中難免需要判斷數(shù)據(jù)類型,本文總結(jié)了四種判斷方法給大家分享,需要的朋友可以參考一下
    2021-11-11
  • 淺談JS正則RegExp對(duì)象

    淺談JS正則RegExp對(duì)象

    這篇文章主要介紹JS正則RegExp對(duì)象,正則表達(dá)式是描述字符模式的對(duì)象,用于對(duì)字符串模式匹配及檢索替換,是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具。下面就來(lái)看具體詳情,需要的朋友可以參考一下
    2021-10-10
  • javascript條件式訪問(wèn)屬性和箭頭函數(shù)介紹

    javascript條件式訪問(wèn)屬性和箭頭函數(shù)介紹

    這篇文章主要介紹了javascript條件式訪問(wèn)屬性和箭頭函數(shù),下面文章圍繞條件式訪問(wèn)屬性和箭頭函數(shù)的相關(guān)資料展開(kāi)文章內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • javascript數(shù)據(jù)類型之原始類型詳解

    javascript數(shù)據(jù)類型之原始類型詳解

    這篇文章主要為大家介紹了javascript數(shù)據(jù)類型之原始類型詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • 關(guān)于前端JavaScript ES6詳情

    關(guān)于前端JavaScript ES6詳情

    這篇文章主要介紹了關(guān)于前端JavaScript中的ES6,ES6是一個(gè)泛指,含義是 5.1 版以后的 JavaScript 的下一代標(biāo)準(zhǔn),涵蓋了 ES2015、ES2016、ES2017語(yǔ)法標(biāo)準(zhǔn),ES6新特性目前只有在一些較新版本瀏覽器得到支持,老版本瀏覽器里面運(yùn)行我們需要將ES6轉(zhuǎn)換為ES5
    2021-10-10
  • 微信小程序的分類頁(yè)面制作

    微信小程序的分類頁(yè)面制作

    這篇文章主要介紹了微信小程序?qū)嵉姆诸愴?yè)面制作的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • JavaScript前端迭代器Iterator與生成器Generator講解

    JavaScript前端迭代器Iterator與生成器Generator講解

    這篇文章主要為大家介紹了JavaScript前端迭代器Iterator與生成器Generator講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解

    JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解

    這篇文章主要為大家介紹了JS前端二維數(shù)組生成樹(shù)形結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • JS中的every()對(duì)空數(shù)組總返回true原理分析

    JS中的every()對(duì)空數(shù)組總返回true原理分析

    這篇文章主要為大家介紹了JS中的every()對(duì)空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09

最新評(píng)論