微信小程序中的數(shù)據(jù)存儲(chǔ)實(shí)現(xiàn)方式
全局變量globalData
在最初創(chuàng)建小程序時(shí),app.js文件中App方法中傳入的對(duì)象里面默認(rèn)添加了globalData參數(shù)。在所有的頁面中我們都可以通過getApp方法獲取到這個(gè)App方法傳入的對(duì)象,進(jìn)而拿到其中的globalData。
const App = getApp(); const openId = App.globalData.openId; App.globalData.openId = 1; delete App.globalData.openId;
globalData的值是一個(gè)對(duì)象,我們可以用對(duì)待對(duì)象的方式一樣調(diào)用它。(globalData并非一定叫這個(gè)名字)
頁面私有變量 data
每個(gè)頁面的js邏輯層頁面都是在Page方法中傳入了一個(gè)對(duì)象。其中data的值一般用來存儲(chǔ)當(dāng)前頁面內(nèi)的變量值。其主要用途是通過setData接口和視圖層進(jìn)行數(shù)據(jù)交互,從而改變wxml視圖層顯示內(nèi)容。
如果不需要將data中的值傳入到視圖層中,不建議使用setData而是改用對(duì)象方式操作??梢杂行Ч?jié)省性能。
在頁面初始化時(shí),data中的數(shù)據(jù)都會(huì)和視圖層進(jìn)行數(shù)據(jù)交互。如果進(jìn)一步處理,我們還可以在對(duì)象中添加localData專門存儲(chǔ)當(dāng)前頁面所需變量
Page({
data: {
openId: 123
},
localData: {
timeStamp: Date.now()
}
})
this.setData({
openId: 321
})
this.data.openId = 321;
this.localData.timeStamp = Data.now();
storage
storage也是小程序中很常用的一種存儲(chǔ)方式,和全局變量globalData類似。不局限于某個(gè)頁面,任何位置都可以通過wx提供的接口獲取到其中的值。
優(yōu)點(diǎn)是:可以長期存儲(chǔ),即使退出重新登陸數(shù)據(jù)不會(huì)消失。(上限存儲(chǔ)10M)
缺點(diǎn)是:異步行為,每次存取耗時(shí)相對(duì)較長。
wx提供了增、刪、改、查接口(增、改都是一個(gè)set接口),下面只舉一個(gè)存儲(chǔ)數(shù)據(jù)例子:
異步存儲(chǔ)(根據(jù)設(shè)備性能的不同,你還真不知道他會(huì)存多久)
wx.setStorage({
key: 'key',
data: 'value',
success: res => {
...
}
})
// 支持promise
wx.setStorage({key: 'key', data: 'value'})
.then(res => {
...
})
同步存儲(chǔ)(會(huì)造成阻塞~)
wx.setStorageSync('key', 'value')
...
文件存儲(chǔ) fileSysteManager
fileSysteManager(下簡(jiǎn)稱fs)可以把文字、圖片類型的數(shù)據(jù)通過文件的方式存儲(chǔ)到本地。存儲(chǔ)上限10M(之前記得200M,后來翻文檔看到的都是10了),長期存儲(chǔ),不刪除小程序數(shù)據(jù)就不會(huì)消失。
寫入:
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分配給當(dāng)前程序的默認(rèn)空間,coder可以在其下創(chuàng)建文件夾,添加文件等。
- fileName是存儲(chǔ)數(shù)據(jù)時(shí)的文件名。
- data是要存儲(chǔ)的數(shù)據(jù),可以是圖片。
- encoding:編碼格式,當(dāng)data為圖片時(shí)可已調(diào)整為二進(jìn)制。
讀取
存取數(shù)據(jù)時(shí)要牢記文件名和存儲(chǔ)位置;
fs.readFile({
filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
encoding: 'utf8',
position: 0,
success(res) {
JSON.parse(res.data)
}
})
移除
fs.unlink({
filePath: `${wx.env.USER_DATA_PATH}/_l${fileName}.txt`,
encoding: 'utf8',
success(res) {
...
}
})
fs的操作都是異步行為,要注意處理邏輯。
到此這篇關(guān)于微信小程序中的數(shù)據(jù)存儲(chǔ)實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)小程序數(shù)據(jù)存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js圖片實(shí)時(shí)加載提供網(wǎng)頁打開速度
沒必要一開始加載就要把全部圖片加載出來,這樣子打開網(wǎng)面的速度得到了很好提高,下面有個(gè)不錯(cuò)的思路,大家可以看看2014-09-09
微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作方法
這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報(bào)之類的,經(jīng)常需要用到微信小程序指定頁面的二維碼,讓用戶掃碼直達(dá)頁面,需要的朋友可以參考下2023-08-08
基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁面
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)幸運(yùn)抽獎(jiǎng)頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03
js控制當(dāng)再次點(diǎn)擊按鈕時(shí)的間隔時(shí)間
這篇文章主要介紹通過js如何控制當(dāng)再次點(diǎn)擊按鈕是的間隔時(shí)間,需要的朋友可以參考下2014-06-06
你有必要知道的10個(gè)JavaScript難點(diǎn)
10個(gè)JavaScript難點(diǎn),你可能還不知道,不著急,本文為大家一一列出,一一攻破,感興趣的小伙伴們可以參考一下2017-07-07
javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)的時(shí)間格式加8小時(shí)功能,涉及javascript日期時(shí)間轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面
本文給大家介紹了如何使用javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)到其他頁面的方法以及實(shí)現(xiàn)原理,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2016-01-01
簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

