微信公众号开发

微信小程序开发之——数据存储Storage

本文主要是介绍微信小程序开发之——数据存储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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!