WeChat アプレットのキャッシュの分析

この記事では、WeChat ミニ プログラム キャッシュ (ローカル キャッシュ、非同期キャッシュ、同期キャッシュ) に関する関連情報を主に紹介します。必要な場合は、

WeChat ミニ プログラム キャッシュ

ローカル キャッシュについて

1 を参照してください。 (wx.setStorageSync)、wx.getStorage (wx.getStorageSync)、wx.clearStorage (wx.clearStorageSync)

は、ローカルキャッシュを設定、取得、および消去できます。最大ローカル キャッシュは 10MB です

2.localStorage は永続ストレージです

1.非同期キャッシュ

wx.setStorage(OBJECT)

ローカル キャッシュで指定されたキーにデータを保存し、上書きします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)

現在のストレージに関する関連情報を非同期で取得します

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

指定されたキーをローカルから非同期的に削除しますキャッシュ。

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

2. 同期キャッシュ

wx.setStorageSync(KEY,DATA)

指定したキーのデータをローカルキャッシュに保存すると、そのキーに対応する元の内容が上書きされます。同期インターフェース。

wx.getStorageSync(KEY)

指定されたキーに対応するコンテンツをローカルキャッシュから同期的に取得します。

wx.getStorageInfoSync

現在のストレージに関する関連情報を同期的に取得します。

wx.removeStorageSync(KEY)

指定されたキーをローカル キャッシュから同期的に削除します。

3. キャッシュをクリアします

wx.clearStorage()

ローカルデータキャッシュをクリアします。

wx.clearStorageSync()

ローカルデータキャッシュを同期的にクリアします

同期キャッシュと非同期キャッシュの違いについて

Sync（同期、同時に）で終わるものはすべて同期キャッシュです、両方 違いは、非同期は現在のタスクをブロックしないことと、同期メソッドが処理されるまで同期キャッシュは実行を続行できないことです。

ただし、通常はすべてのキャッシュをクリアする必要はありません。対応するキャッシュをクリアしたい場合は、対応するキャッシュの内容を空の配列に設定するだけです

履歴検索について

ページ

3 つのバインド イベントはここにあります

bindinput="searchNameInput" ユーザーが入力したデータを取得します

bindtap="setSearchStorage" ローカル ストレージを設定します

bindtap="deleteHistory" 履歴検索を削除します

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

検索をクリックすると、bindtap="setSearchStorage"

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

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

プロセスは次のようになります:

1. データが空でない場合は、データを追加 (設定) します。ローカル キャッシュ

3. サーバーにアクセスして、ユーザーが必要なデータを検索し、それをこのページの変数に割り当てます

4. [削除] をクリックして、このキーのローカル値を削除します

ここでキャッシュされたフォームはキーです=>value

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

'searchData' という名前のローカル キャッシュを取得します。キャッシュ 'searchData' が存在しない場合は、空の配列を検索データ変数に代入します

searchData .push(this.data.inputValue)

ユーザーが入力した値をsearchData変数にPUSHします

wx.setStorageSync('searchData', searchData)

API インターフェースを呼び出し、key = 'searchData' をリセットします。このキャッシュの値は searchData と同じです。

以下の wx.request は、要求されたデータの内容です。話すのは飽きましたが、十分に印象的です。 。 キャッシュを取得するためのバインドタップはありません。キャッシュを取得してページ内のデータに追加するだけです

//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
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,
      })
     },
    })
  }
}

ここでは、「searchData」キーのキャッシュされた値を、を使用する代わりに空の配列に設定しますそれを提供するための API wx.clearStorageSync、これは他のすべてのキャッシュをクリアします、そして私はこのキーのキャッシュをクリアしたいだけです

上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連するおすすめ:

WeChat ミニ プログラム ポップアップウィンドウのカスタマイズコード

WeChatアプレットのメッセージプロンプトボックスの実装

以上がWeChat アプレットのキャッシュの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。