1. 程式人生 > 程式設計 >微信小程式中的資料儲存實現方式

微信小程式中的資料儲存實現方式

目錄
  • 全域性變數globalData
  • 頁面私有變數 data
  • storage
    • 非同步儲存(根據裝置效能的不同,你還真不知道他會存多久)
    • 同步儲存(會造成阻塞~)
  • 檔案儲存 fileSysteManager
    • 寫入:
    • 讀取
    • 移除

全域性變數globalData

在最初建立小程式時,app.檔案中App方法中傳入的物件裡面預設添加了globalData引數。在所有的頁面中我們都可以通過getApp方法獲取到這個App方法傳入的物件,進而拿到其中的globalData。

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

globalData的值是一個物件,我們可以用對待物件的方式一樣呼叫它。(globalData並非一定叫這個名字)

頁面私有變數 data

每個頁面的js邏輯層頁面都是在Page方法中傳入了一個物件。其中data的值一般用來儲存當前頁面內的變數值。其主要用途是通過setData介面和檢視層進行資料互動,從而改變wxml檢視層顯示內容。

如果不需要將data中的值傳入到檢視層中,不建議使用setData而是改用物件方式操作。可以有效節省效能。
在頁面初始化時,data中的資料都會和檢視層進行資料互動。如果進一步處理,我們還可以在物件中新增localData專門儲存當前頁面所需變數

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

storage

storage也是小程式中很常用的一種儲存方式,和全域性變數globalData類似。不侷限於某個頁面,任何位置都可以通過wx提供的介面獲取到其中的值。

優點是:可以長期儲存,即使退出重新登陸資料不會消失。(上限儲存10M)
缺點是:非同步行為,每次存取耗時相對較長。
wx提供了增、刪、改、查介面(增、改都是一個set介面),下面只舉一個儲存資料例子:

非同步儲存(根據裝置效能的不同,你還真不知道他會存多久)

wx.setStorage({
 key: 'key',data: 'value',success: res => {
  ...
 }
})
// 支援promise
wx.setStorage({key: 'key',data: 'value'})
 .then(res => {
  ...
 })

同步儲存(會造成阻塞~)

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

檔案儲存 fileSysteManager

fileSysteManager(下簡稱fs)可以把文字、圖片型別的資料通過檔案的方式儲存到本地。儲存上限10M(之前記得200M,後來翻文件看到的都是10了),長期儲存,不刪除小程式資料就不會消失。

寫入:

const fs = wx.getFileSystemManager();
fs.writeFile({
  filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,data: JSON.stringify(data),encoding: 'utf8',success(res) { ... }
})
  • filePath中的 env.userDatapath 是wx分配給當前程式的預設空間,coder可以在其下建立資料夾,新增檔案等。
  • VXVPa
  • fileName是儲存資料時的檔名。
  • data是要儲存的資料,可以是圖片。
  • encoding:編碼格式,當data為圖片時可已調整為二進位制。

讀取

存取資料時要牢記檔名和儲存位置;

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

移除

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

fs的操作都是非同步行為,要注意處理邏輯。

到此這篇關於微信小程式中的資料儲存實現方式的文章就介紹到這了,更多相關小程式資料儲存內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!