微信小程序开发之——数据存储Storage
2021/11/10 12:39:55
本文主要是介绍微信小程序开发之——数据存储Storage,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一 概述
微信小程序默认创建的应用,点击用户头像,会显示log日志,日志存储在Storage中,key值是logs,value值是Array数组,数组的长度为8
二 logs日志分析
2.1 读取logs日志并追加(app.js)
onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }
说明:
- wx.getStorageSync(‘logs’):读取Storage中存储的logs日志
- logs.unshift(Date.now()):向日志中追加一条新的日志
- wx.setStorageSync(‘logs’, logs):将追加后的日志,存储到Storage中
2.2 logs页面展示日志信息
2.2.1 logs.js(获取Stroage中存储的logs日志,并将long类型通过formatTime格式化)
onLoad() { this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return { date: util.formatTime(new Date(log)), timeStamp: log } }) }) }
2.2.2 logs.wxml展示
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log.date}}</text> </block>
三 Stroage说明
- 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容
- 除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。
- 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
四 Storage示例
界面
4.1 保存数据(wx.setStorageSync/wx.setStorage)
代码
data: { jsonData: { name: '张三',age: 18} }, addBasic() { /**原生类型 */ wx.setStorage({ key: 'key-basic', data: '张三' }) }, addDate() { /**Date类型 */ wx.setStorage({ key: 'key-date', data: util.formatTime(new Date()) }) }, addJson() { /**JSON.stringify序列化的对象 */ wx.setStorage({ key: 'key-json', data: this.data.jsonData, success: function () { console.log("Storage--success"); } }) },
Storage中变化
4.2 清除数据(wx.removeStorage/wx.removeStorageSync)
代码
removeBasic(){ wx.removeStorage({ key: 'key-basic', }) },
Storage中变化
4.3 获取所有Storage(wx.getStorageInfo/wx.getStorageInfoSync())
代码
storageInfo(){ wx.getStorageInfo({ success: (option) => { console.log(option); }, }) },
获取的结果
4.4 清除所有Storage(wx.clearStorage/wx.clearStorageSync())
代码
clearStorageInfo(){ wx.clearStorage({ success: (res) => { console.log("数据清除成功"); }, }) }
效果图
五 参考
- CSDN下载-参考代码
- 微信小程序官方文档-Storage
这篇关于微信小程序开发之——数据存储Storage的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享