WeChat applet cache: local cache, synchronous cache, asynchronous cache, and Applet asynchronous

Applet cache: local cache, synchronous cache, asynchronous cache, and Applet asynchronous
About local cache

1. wx. setStorage (wx. setStorageSync), wx. getStorage (wx. getStorageSync), and wx. clearStorage (wx. clearStorageSync) can set, retrieve, and clear local caches. The maximum local cache size is 10 MB.

2. localStorage is permanent storage

I. asynchronous Cache

Wx. setStorage (OBJECT)

Storing data in the specified key in the local cache will overwrite the content corresponding to the original key.

wx.setStorage({  key:"key",  data:"value"})

Wx. getStorage (OBJECT)

Asynchronously retrieves the content of a specified key from the local cache.

wx.getStorage({  key: 'key',  success: function(res) {      console.log(res.data)  }})

Wx. getStorageInfo (OBJECT)

Asynchronously obtains 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 removes the specified key from the local cache.

wx.removeStorage({  key: 'key',  success: function(res) {    console.log(res.data)  }})

Ii. synchronous Cache

Wx. setStorageSync (KEY, DATA)

Storing data in the specified key in the local cache will overwrite the content corresponding to the original key, which is a synchronous interface.

Wx. getStorageSync (KEY)

Synchronously obtains the content of the specified key from the local cache.

Wx. getStorageInfoSync

Synchronously obtain information about the current storage

Wx. removeStorageSync (KEY)

Synchronously remove a specified key from the local cache.

Iii. Clear Cache

Wx. clearStorage ()

Clear the local data cache.

Wx. clearStorageSync ()

Clean up local data cache synchronously

Differences between synchronous cache and asynchronous Cache

Synchronization cache ends with Sync (synchronous at the same time). The difference between the two is that asynchronous will not block the current task, and the synchronization cache will not continue until the synchronization method is processed.

However, in general, do not clear all caches. To clear the corresponding cache, set the corresponding cache content to an empty array.

Search history

 
  
Search
 
     
          
   
    
Historical search
           
   
    
Delete search history
       
      
          
               
    
     
{Item = null? 'No data': item }}
            
       
  
 

Page

There are three binding events.

• Bindinput = "searchNameInput" get user input data
• Bindtap = "setSearchStorage" set local storage
• Bindtap = "deleteHistory" delete History Search
  

  // Obtain the value of the user input box searchNameInput: function (e) {var that = this; that. setData ({inputValue: e. detail. value })}

  E. detail. value indicates the current input value.

  When you click search, bindtap = "setSearchStorage"

  // Save the content entered by the user to the local cache and put the search data to the homepage setSearchStorage: function () {var that = this if (this. data. inputValue! = '') {// Call the API to save data to the local cache var searchData = wx. getStorageSync ('searchdata') | [] searchData. push (this. data. inputValue) wx. setStorageSync ('searchdata', searchData) // read the 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 ,})},})}}

  The process follows:

  1. Enter data and click Search

  2. if the data is not empty, add (SET) the local cache.

  3. Search the user's desired data on the server and assign the variable to the page

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

  Key => value in cache format

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

  Obtain the cache with the local name 'searchdata'. If 'searchdata' does not exist, the cache is equivalent to a new empty array, which is 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 and reset the value cached by key = 'searchdata' to searchData. The following wx. request is the content of the request data. I'm so tired of talking about it and I'm very impressed.

  There is no bindtap bound to obtain the cache, as long as it is obtained, and then added to the data in the Page

  // Obtain historical search data from the local machine var searchData = wx. getStorageSync ('searchdata') | [] this. setData ({searchData: searchData}) deleteHistory // Delete historical search data deleteHistory: function () {var that = this wx. showModal ({title: 'hprompt ', content: 'delete history search', success: function (res) {if (res. confirm) {wx. setStorageSync ('searchdata', []); wx. switchTab ({url: '/pages/index/Index ',})}}})}

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