検索
ホームページWeChat アプレットミニプログラム開発WeChat アプレットのキャッシュの分析

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

Jun 23, 2018 pm 02:41 PM
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 != &#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,
      })
     },
    })
  }
}

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

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

関連するおすすめ:

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

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


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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール