Analyse du cache dans l'applet WeChat

Cet article présente principalement des informations pertinentes sur l'explication détaillée du cache du programme WeChat Mini (cache local, cache asynchrone, cache synchrone). Les amis dans le besoin peuvent se référer au

Cache du programme WeChat Mini

À propos du cache local

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

Vous pouvez définir, récupérer et nettoyer le cache local. Le cache local maximum est de 10 Mo

2. localStorage est un stockage permanent

1. . setStorage(OBJECT)

Stocke les données dans la clé spécifiée dans le cache local et écrasera le contenu original correspondant à la clé

wx.getStorage(OBJECT)

wx.setStorage({

 key:"key",

 data:"value"

})

Obtenez de manière asynchrone le contenu correspondant à la clé spécifiée à partir du cache local.

wx.getStorageInfo(OBJECT)

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

Obtenir de manière asynchrone des informations pertinentes sur le stockage actuel

wx.removeStorage(OBJECT)

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

Supprimez de manière asynchrone la clé spécifiée du cache local.

2. Cache de synchronisation

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

wx.setStorageSync(KEY,DATA)

Le stockage des données dans la clé spécifiée dans le cache local écrasera le contenu original correspondant à la clé. Il s'agit d'une interface de synchronisation.

wx.getStorageSync(KEY)

Obtenez de manière synchrone le contenu correspondant à la clé spécifiée à partir du cache local.

wx.getStorageInfoSync

Obtenir de manière synchrone des informations pertinentes sur le stockage actuel

wx.removeStorageSync(KEY)

Supprimez de manière synchrone la clé spécifiée du cache local.

3. Videz le cache

wx.clearStorage()

Nettoyez le cache de données local.

wx.clearStorageSync()

Effacer de manière synchrone le cache de données local

À propos de la différence entre le cache synchrone et le cache asynchrone

Tout ce qui se termine par Sync (synchrone, simultanément) est un cache synchrone. La différence entre les deux est que l'asynchrone ne bloquera pas la tâche en cours et que le cache synchrone ne peut pas continuer jusqu'à ce que le cache synchrone soit terminé. la méthode est traitée. Mais généralement, n'effacez pas tous les caches. Si vous souhaitez vider le cache correspondant, définissez simplement le contenu du cache correspondant sur un tableau vide

À propos de la recherche historique

Page

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

Il y a trois événements contraignants ici

bindinput =" searchNameInput" Récupérer les données saisies par l'utilisateur

bindtap="setSearchStorage" Définir le stockage local

bindtap="deleteHistory" Supprimer la recherche historique

Lorsque vous cliquez sur Rechercher, bindtap="setSearchStorage"

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

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

Le processus se déroule comme ceci :

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

1. L'utilisateur saisit les données et clique sur Rechercher

2 Si les données ne sont pas vides, ajoutez (définissez) le cache local

<. 🎜>3. Accédez au serveur pour rechercher les données souhaitées par l'utilisateur et attribuez-les à la variable sur cette page

4 Cliquez sur Supprimer pour supprimer la valeur locale de cette clé

. Le formulaire mis en cache ici est key=>value

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

Obtenez le cache local nommé 'searchData' ', si le cache 'searchData' n'existe pas Cela équivaut à recréer un tableau vide et à l'attribuer à la variable searchData

searchData.push(this.data.inputValue)

PUSH la valeur saisie par l'utilisateur dans searchData Dans cette variable

wx.setStorageSync('searchData', searchData)

appelle l'interface API et réinitialise la valeur en cache de key = 'searchData' égale à searchData

Le wx.request ci-dessous est le contenu des données demandées, j'en ai marre d'en parler, mais c'est assez impressionnant. Il n'y a pas de bindtap pour obtenir le cache, récupérez-le simplement et ajoutez-le aux données de la page

Voici la valeur mise en cache de la clé 'searchData' est un tableau vide, au lieu d'utiliser wx.clearStorageSync fourni par l'API. Cela effacera tous les autres caches, et je veux juste vider le cache de cette clé

. C'est tout pour cet article. L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

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

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

        })

       }

      }

    })

}

Recommandations associées :

Mini programme WeChat Code de personnalisation de la fenêtre contextuelle

Mise en œuvre de la boîte d'invite de message de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!