Data storage implementation method in WeChat applet

Global variable globalData

When the mini program is initially created, the globalData parameter is added by default to the object passed into the App method in the app.js file. In all pages, we can use the getApp method to get the object passed in by the App method, and then get the globalData in it.

const App = getApp();
const openId = App.globalData.openId;
App.globalData.openId = 1;
delete App.globalData.openId;

The value of globalData is an object, and we can call it in the same way as an object. (globalData is not necessarily called this name)

Page private variable data

The js logic layer page of each page passes an object into the Page method. The value of data is generally used to store the variable value in the current page. Its main purpose is to interact with the view layer through the setData interface to change the display content of the wxml view layer.

If you do not need to pass the value in data to the view layer, it is not recommended to use setData but to use object operation instead. Can effectively save performance.
When the page is initialized, the data in the data will interact with the view layer. If we further process, we can also add localData to the object to specifically store the variables required for the current page.

Page({
 data: {
  openId: 123
 },
 localData: {
  timeStamp: Date.now()
 }
})
this.setData({
 openId: 321
})
this.data.openId = 321;
this.localData.timeStamp = Data.now();

storage

Storage is also a very common storage method in mini programs, similar to the global variable globalData. Not limited to a certain page, the value can be obtained anywhere through the interface provided by wx.

The advantage is that the data can be stored for a long time and will not disappear even if you log out and log in again. (Upper storage limit 10M)
The disadvantages are: asynchronous behavior, each access takes a relatively long time.
wx provides add, delete, modify, and check interfaces (add and modify are both set interfaces). Here is just an example of storing data:

Asynchronous storage (depending on the performance of the device, you really don’t know how long it will be stored)

wx.setStorage({
 key: 'key',
 data: 'value',
 success: res => {
  ...
 }
})
// Support promises
wx.setStorage({key: 'key', data: 'value'})
 .then(res => {
  ...
 })

Synchronous storage (will cause blocking~)

wx.setStorageSync('key', 'value')
...

File Storage fileSysteManager

fileSysteManager (hereinafter referred to as fs) can store text and image data locally in the form of files. The storage limit is 10M (I remember it was 200M before, but later I saw 10 in the documents). It is stored for a long time and the mini program data will not disappear unless it is deleted.

Write:

const fs = wx.getFileSystemManager();
fs.writeFile({
  filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  data: JSON.stringify(data),
  encoding: 'utf8',
  success(res) { ... }
})

• The env.userDatapath in filePath is the default space assigned by wx to the current program. The coder can create folders, add files, etc. under it.
• fileName is the file name when storing data.
• data is the data to be stored, which can be a picture.
• encoding: encoding format. When data is a picture, it can be adjusted to binary.
  

Read

Keep the file name and storage location in mind when accessing data;

fs.readFile({
  filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  encoding: 'utf8',
  position: 0,
  success(res) {
 JSON.parse(res.data) 
  }
})

Remove

fs.unlink({
  filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
  encoding: 'utf8',
  success(res) {
 ...
  }
})

All fs operations are asynchronous, so pay attention to the processing logic.

This is the end of this article about the implementation of data storage in WeChat Mini Programs. For more relevant Mini Program data storage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!