Application and implementation of data cache mechanism for small programs

Application and implementation of data cache mechanism for small programs

Mini Program Data Cache Related Knowledge

Data cache: caches data so that when the applet is opened again after exiting, the last saved data can be read from the cache. The commonly used data cache APIs are shown in the following table:

insert image description here

Note : Stores the data at the specified key in the local cache. The original content corresponding to the key will be overwritten. The data will always be available unless the user actively deletes it or the system clears it due to storage space reasons. The maximum length of data stored in a single key is 1MB, and the upper limit for all data storage is 10MB.

parameter

For detailed parameters, please see
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

Save data cache

// Save data cache wx.setStorage({
  key: 'key', // The key specified in the local cache
  data: 'value', // content to be stored (supports object or string)
  success: res => {}, // callback function for successful interface call	
  fail: res => {} // callback function for interface call failure})

Get data cache

// Get data cache wx.getStorage({
  key: 'key', // The key specified in the local cache
  success: res => { // Callback function of successful interface call console.log(res.data)
  }, 
  fail: res => {} // callback function for interface call failure})

Example: Storing and retrieving in onLoad

// pages/test/test.js
Page({
  onLoad: function(options) {
    // Save data cache wx.setStorage({
      key: 'key', // The key specified in the local cache
      data: 'value', // content to be stored (supports object or string)
      success: res => {
        // Get data cache wx.getStorage({
          key: 'key', // The key specified in the local cache
          success: res => { // Callback function of successful interface call console.log(res.data)
          },
          fail: res => { } // callback function for interface call failure})
      }, // callback function for successful interface call fail: res => {} // callback function for failed interface call })
  }
})

This is the end of this article about the application and implementation of the mini-program data caching mechanism. For more relevant mini-program data caching content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • WeChat Mini Program - Detailed Explanation of Data Caching
  • WeChat applet cache (local cache, asynchronous cache, synchronous cache) detailed explanation
  • How to clean up the local cache of the applet
  • WeChat applet data cache example detailed explanation
  • WeChat applet local cache data addition, deletion, modification and query example
  • Detailed explanation of writing and reading cache in WeChat applet
  • How to play cached audio files in WeChat applet in IOS
  • WeChat applet development data storage parameter transfer data cache
  • How to modify a single data in the local cache key in WeChat applet

<<:  Windows 2019 Activation Tutorial (Office2019)

>>:  Detailed explanation of the definition and usage of MySQL stored functions (custom functions)

Recommend

How to delete garbled or special character files in Linux

Due to encoding reasons, garbled characters will ...

Nginx reverse proxy springboot jar package process analysis

The common way to deploy a springboot project to ...

Pure CSS3 realizes the effect of div entering and exiting in order

This article mainly introduces the effect of div ...

mysql delete multi-table connection deletion function

Deleting a single table: DELETE FROM tableName WH...

Using CSS to implement image frame animation and curve motion

The basic principle of all animations is to displ...

Detailed explanation of Alibaba Cloud security rule configuration

Two days ago, I took advantage of the Double 11 s...

How to configure Nginx domain name rewriting and wildcard domain name resolution

This article introduces how to configure Nginx to...

Solution to the blank page after vue.js packaged project

I believe that many partners who have just come i...

MySQL index for beginners

Preface Since the most important data structure i...

How to implement multiple parameters in el-dropdown in ElementUI

Recently, due to the increase in buttons in the b...

CSS3 to achieve menu hover effect

Result: html <nav id="nav-1"> <...

Vue implements sample code to disable browser from remembering password function

Find information Some methods found on the Intern...