微信小程序开发之——数据存储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相关推荐
- 微信小程序开发之数据存储 参数传递 数据缓存
微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没 ...
- 微信小程序开发之数据保存
写在前面 微信小程序保存数据形式有以下几种,不限于以下几种: 本地缓存 本地存储文档保存 云开发平台数据库存储 1.本地缓存 说明: 本地缓存的操作有4个API:分别提供同步保存数据wx.setSto ...
- 微信小程序开发11 数据预取：合理缓存提高用户体验
你好,我是俊鹏,今天我带你学习怎么通过微信提供的数据预取能力,提高小程序的用户体验. 数据预取也叫数据预加载,顾名思义,这项能力能提前加载未来要使用的数据,然后缓存到本地.这样一来,你在使用这些数据时 ...
- 微信小程序如何将数据存储到服务器,微信小程序关于数据存储的一些坑
微信小程序存储方式官方文档说得很清楚,同步和异步.保存数据有以下两种方式: wx.setStorage 异步保存 wx.setStorageSync同步保存 获取数据也是两种: wx.getStora ...
- 微信小程序开发07 数据监控：善用数据驱动产品迭代
你好,我是俊鹏,今天我们一起学习如何打造小程序的数据监控体系. 前几年,我看了<人人都是产品经理>这本畅销书,我觉得它给了我们一个很有意义的启示:技术之外,多思考产品.而数据对产品的意义很 ...
- 微信小程序开发之数据埋点统计
在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前页面: let pages = getC ...
- 微信小程序缓存获取数据教程
微信小程序缓存获取数据教程 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
- 微信小程序开发：学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- 微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
最新文章
- 中文转换成阿拉伯数字
- JSEnhancements.vsix
- UA MATH524 复变函数13 奇点与留数
- 【Linux】10_存储管理EXT4文件系统详解
- 机器学习入门学习笔记：（2.4）线性判别分析理论推导
- linux系统管理Linux系统实验,实验4-Linux系统管理实验.pdf
- [Android] 通过Menu实现图片怀旧、浮雕、模糊、光照和素描效果
- 郑州百知面试题 SSM试题三
- 学习opencv3中文版_给视觉组新生的一点学习建议
- 【Python】Python简介和Python解释器
- 嵌套 思维导图_看我怎么用思维导图，来轻松学习JavaScript，值得收藏
- H5游戏开发-游戏的介绍
- 关于android中的armeabi、armeabi-v7a、arm64-v8a及x86等用splits用指定打包
- Exchange2010删除指定账户指定主题邮件
- 通过js脚本处理剪切板(简单而强大的效率工具)
- java的nexttoken_int nextToken()
- python学生管理系统用列表_史上最全面的python学生管理系统教程（二）
- 第一次发，可能不太好，别喷我
- 【机器学习】入门001
- python语音播报天气预报_Python3爬虫之自动查询天气并实现语音播报