Analysis of cache in WeChat applet

This article mainly introduces the relevant information of WeChat Mini Program cache (local cache, asynchronous cache, synchronous cache). Friends in need can refer to

WeChat Mini Program Cache

About local cache

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）

You can set, get and clean the local cache. The maximum local cache is 10MB

2.localStorage is permanent storage

1. Asynchronous cache

wx. setStorage(OBJECT)

Store the data in the specified key in the local cache, and will overwrite the original content corresponding to the key

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

Asynchronously obtain the content corresponding to the specified key from the local cache.

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

Asynchronously obtain relevant information about the current storage

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

Asynchronously remove the specified key from the local cache.

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

2. Synchronization cache

wx.setStorageSync(KEY,DATA)

Storing data in the specified key in the local cache will overwrite the original content corresponding to the key. This is a synchronization interface.

wx.getStorageSync(KEY)

Synchronously obtain the content corresponding to the specified key from the local cache.

wx.getStorageInfoSync

Synchronously obtain relevant information about the current storage

wx.removeStorageSync(KEY)

Synchronically remove the specified key from the local cache.

3. Clear the cache

wx.clearStorage()

Clear the local data cache.

wx.clearStorageSync()

Synchronically clear the local data cache

About the difference between synchronous cache and asynchronous cache

Everything ending with Sync (synchronous, simultaneously) is a synchronous cache. The difference between the two is that asynchronous will not block the current task, and the synchronous cache cannot continue until the synchronization method is processed. implement.

But generally do not clear all caches. If you want to clear the corresponding cache, just set the corresponding cache content to an empty array

About historical search

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

Page

There are three binding events here

bindinput=" searchNameInput" Get the data entered by the user

bindtap="setSearchStorage" Set local storage

##bindtap="deleteHistory" Delete historical search

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

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

When you click search, 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,
      })
     },
    })
  }
}

Process This goes like this:

1. The user enters data and clicks search

2. If the data is not empty, add (set) the local cache

3. Go to the server to search for what the user wants Assign the required data to the variable on this page

4. Click Delete to remove the local value of this key

The cached form here is key=>value

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

Get the local cache named 'searchData'. If the cache 'searchData' does not exist, it is equivalent to recreating it. Empty array, assigned to the searchData variable

searchData.push(this.data.inputValue)

PUSH the value entered by the user into the searchData variable

wx.setStorageSync('searchData', searchData)

Call the API interface and reset the cached value of key = 'searchData' to equal searchData

The following The wx.request is the content of the requested data. I'm tired of talking about it, but it's impressive enough.

There is no bindtap to get the cache, just get it and add it to the data in the Page

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

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

        })

       }

      }

    })

}

Here is the 'searchData 'The cached value of this key is an empty array, instead of using wx.clearStorageSync provided by the API. This will clear all other caches, and I just want to clear the cache of this key.

The above is the entire article Content, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program Pop-up window customization code

Implementation of message prompt box of WeChat applet

The above is the detailed content of Analysis of cache in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!