How does the WeChat applet cache and obtain data?

Each WeChat applet can have its own local cache, which can be accessed through wx.setStorage (wx.setStorageSync), wx.getStorage (wx.getStorageSync), wx.clearStorage (wx .clearStorageSync) can set, get and clean the local cache. The storage limit for the same WeChat user and the same mini program is 10MB. localStorage is isolated at the user dimension. User A cannot read user B's data on the same device.

Where is data commonly used?

For historical records and shopping cart events with small data requirements, you can use storage for caching. Storage stores the data in the specified key in the local cache. If it is repeated, the original key will be overwritten. For the corresponding content, please refer to Storage

in the WeChat Mini Program Development Manual. How to use asynchronous interfaces for data caching?

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

OBJECT parameter description:

Sample code

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

After setStorage, you can go to the developer tools to see if the value is saved. In this case

#You can see that there is no key value, so when we perform an input search

Finally go to the storage to view

I got an Array array with key "history", then look at the storage

I got an array and it was not overwritten, so what? What was achieved? Let’s take a look at the js code first

search.js

Set data

data: {
    status:false,
    inputsearch:\'\',
    job:[],
    history:[],
},

First get the value in storage

  onLoad: function (options) {
    var that =this;
    wx.getStorage({
    key: \'history\',
    success: function(res){
        that.setData({
          history:res.data,
        })
        if(that.data.history.length==0){
          that.setData({
            status:false
          });
        }else{
          that.setData({
            status:true
          })
         }
      },
      fail: function(res) {
        console.log(res+\'aaaaa\')
      }
    });
},

Search and cache the data In storage

search:function(e){
var that =this;
var sear =this.data.inputsearch;
var jobs=this.data.job;
var input = new RegExp(sear);
var temp = [];
if(sear == \'\'){
 
wx.showToast({
    title: \'请输入要搜索信息\',
    icon:none,
    duration: 1000
  });
 return false;
}else{
   this.data.history.unshift(sear);
wx.setStorage({
  key: \'history\',
  data: that.data.history,
  success: function(res){
    that.setData({
      history:that.data.history,
      status:true
    })
    console.log(res.data);
  },
})
  for(let i =0;i<jobs.length;i++){< span="" style="margin: 0px; padding: 0px;">
    if(input.test(jobs[i].job) || input.test(jobs[i].company) || input.test(jobs[i].address)){
      temp.push(jobs[i]);
    var detail=temp;
    app.globalData.details=detail;
    }
  } 
  if(temp ==\&#39;\&#39;){
     wx.showToast({
    title: \&#39;暂无此信息\&#39;,
    icon:none,
    duration: 1000
    
  });
  this.setData({
    inputsearch:\&#39;\&#39;
  })
  }else if(temp){
    wx.navigateTo({
      url:\&#39;../about/about\&#39;
    })
    this.setData({
      inputsearch:\&#39;\&#39;
    })
  }
 }
},

Set the key value in storage to history

wx.setStorage({
  key: \'history\',
  data: that.data.history,
)}

Define an array history empty array to get the value in storage. First, check whether there is the key value. If not If it fails, then history is still an empty array

wx.setStorage({
  key: \'history\',
  data: that.data.history,
  success: function(res){
    that.setData({
      history:that.data.history,
      status:true
    })
  },
})

After returning to history, add the value of inputsearch to history

There is a misunderstanding here. Maybe you will push the input value inputsearch to A new empty array, and then push this new array into the history array, but this method is obviously not feasible. After you add it, the new array will be stored under the first subscript of the history array. For the history array, that is There are only two values

Okay, back to what I want to say, so how to add inputsearch to history? You can use the unshift method or the push method. Unshift should be used here. Each new value should be stored in The first position of history, this is actually a user experience issue

var that =this;
var sear =this.data.inputsearch;
this.data.history.unshift(sear);
wx.setStorage({
    key: \'history\',
    data: that.data.history,
      success: function(res){
        that.setData({
          history:that.data.history,
          status:true
        })
        console.log(res.data);
      },
})

Okay, so there will be no problem of "overwriting" the original key value

Recommendation: "小program development tutorial"

The above is the detailed content of How does the WeChat applet cache and obtain data?. For more information, please follow other related articles on the PHP Chinese website!