Analyse des Caches im WeChat-Applet

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erläuterung des WeChat Mini-Programm-Cache (lokaler Cache, asynchroner Cache, synchroner Cache) vorgestellt. Freunde in Not können sich auf

WeChat Mini-Programm-Cache

Über den lokalen Cache

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

Sie können den lokalen Cache festlegen, abrufen und bereinigen. Der maximale lokale Cache beträgt 10 MB

2. localStorage ist permanenter Speicher

1. Asynchroner Cache

wx . setStorage(OBJECT)

Speichert die Daten im angegebenen Schlüssel im lokalen Cache und überschreibt den ursprünglichen Inhalt, der dem Schlüssel entspricht

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

Beziehen Sie den Inhalt, der dem angegebenen Schlüssel entspricht, asynchron aus dem lokalen Cache.

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

Asynchron relevante Informationen über den aktuellen Speicher abrufen

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

Entfernen Sie den angegebenen Schlüssel asynchron aus dem lokalen Cache.

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

2. Synchronisationscache

wx.setStorageSync(KEY,DATA)

Das Speichern von Daten im angegebenen Schlüssel im lokalen Cache überschreibt den ursprünglichen Inhalt, der dem Schlüssel entspricht. Dies ist eine Synchronisierungsschnittstelle.

wx.getStorageSync(KEY)

Rufen Sie den Inhalt, der dem angegebenen Schlüssel entspricht, synchron aus dem lokalen Cache ab.

wx.getStorageInfoSync

Beziehen Sie synchron relevante Informationen über den aktuellen Speicher

wx.removeStorageSync(KEY)

Entfernen Sie den angegebenen Schlüssel synchron aus dem lokalen Cache.

3. Leeren Sie den Cache

wx.clearStorage()

Leeren Sie den lokalen Datencache.

wx.clearStorageSync()

Lokalen Datencache synchron löschen

Über den Unterschied zwischen synchronem und asynchronem Cache

Alles, was mit Sync (synchron, gleichzeitig) endet, ist ein synchroner Cache. Der Unterschied zwischen den beiden besteht darin, dass der asynchrone Cache die aktuelle Aufgabe nicht blockiert und der synchrone Cache erst dann fortgesetzt werden kann, wenn der synchrone Cache ausgeführt wird Methode wird verarbeitet.

Leeren Sie jedoch im Allgemeinen nicht alle Caches. Wenn Sie den entsprechenden Cache löschen möchten, setzen Sie einfach den entsprechenden Cache-Inhalt auf ein leeres Array

Über die historische Suche

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

Seite

Hier gibt es drei verbindliche Ereignisse

bindinput=" searchNameInput" Rufen Sie die vom Benutzer eingegebenen Daten ab

bindtap="setSearchStorage" Lokalen Speicher festlegen

bindtap="deleteHistory" Historische Suche löschen

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

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

Wenn Sie auf „Suchen“ klicken, 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,
      })
     },
    })
  }
}

Prozess Das geht so:

1. Der Benutzer gibt Daten ein und klickt auf Suchen

2. Wenn die Daten nicht leer sind, fügen Sie den lokalen Cache hinzu

3 Der Server sucht nach dem, was der Benutzer möchte. Die erforderlichen Daten werden der Variablen dieser Seite zugewiesen.

4 Klicken Sie auf „Löschen“, um den lokalen Wert dieses Schlüssels zu entfernen.

Das zwischengespeicherte Formular hier ist key= >value

var searchData = wx.getStorageSync('searchData') || ' existiert nicht, es entspricht dem Zurücksetzen des leeren Arrays, das der Variable searchData

searchData.push(this.data.inputValue)

PUSH zugewiesen ist vom Benutzer in die Variable searchData eingegebener Wert

wx.setStorageSync('searchData', searchData)

Rufen Sie die API-Schnittstelle auf und setzen Sie den zwischengespeicherten Wert von key = ' zurück searchData' entspricht searchData unten Die wx.request ist der Inhalt der angeforderten Daten. Ich bin es leid, darüber zu reden, aber es ist beeindruckend genug.

Es gibt keinen Bindtap, um den Cache abzurufen, holen Sie ihn sich einfach und fügen Sie ihn zu den Daten auf der Seite hinzu

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

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

        })

       }

      }

    })

}

Hier ist das ' searchData 'Der Wert des Caches dieses Schlüssels ist ein leeres Array, anstatt wx.clearStorageSync zu verwenden, das von der API bereitgestellt wird. Dadurch werden alle anderen Caches gelöscht, und ich möchte nur den Cache dieses Schlüssels löschen

Das ist alles Für den Inhalt dieses Artikels hoffe ich, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

WeChat-Miniprogramm Code zur Anpassung des Popup-Fensters

Implementierung der Nachrichtenaufforderungsbox des WeChat-Applets

Das obige ist der detaillierte Inhalt vonAnalyse des Caches im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!