小程序数据存储 微信小程序中的数据存储实现方式
HealthyZhang 人气:0想了解微信小程序中的数据存储实现方式的相关内容吗,HealthyZhang在本文为您仔细讲解小程序数据存储的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:小程序数据存储,小程序,存储,下面大家一起来学习吧。
全局变量globalData
在最初创建小程序时,app.js文件中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') ...
文件存储 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可以在其下创建文件夹,添加文件等。
- fileName是存储数据时的文件名。
- data是要存储的数据,可以是图片。
- encoding:编码格式,当data为图片时可已调整为二进制。
读取
存取数据时要牢记文件名和存储位置;
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的操作都是异步行为,要注意处理逻辑。
加载全部内容