小程序全局共享数据--存储

简介: 小程序全局共享数据--存储

1. 前言

全局共享数据 或者叫页面状态管理?


2. 全局共享数据

  1. 如果叫全局共享数据的话 其实用globalData或者 存储的话也还凑合

3. globalData

  1. 简单玩下吧
  2. 存储

// app.js
  // 全局的对象
{
  globalData: {
    userInfo: null,
    person:{
      name:"yzs",
     roomType:"别墅",
      students:[
        {id:123,age:30}
      ]
    }
  }
}
  1. 访问

const app = getApp()
//打印app 就知道

4. 微信存储

  1. 需要存储的内容。
  2. 只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
  3. storage 应只用来进行数据的持久化存储,不应用于运行时的数据传递或全局状态管理。
  4. 启动过程中过多的同步读写存储,会显著影响启动耗时。
  5. 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。
  6. 除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。
  7. 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB

5. 同步

同步存储

wx.setStorage({
          key: "web111",
          data: {
              name: "web-yzs",
               roomType:"别墅",
              content: "同步存储",
              hobby: ["羽毛球", '爬山']
          }
      })

同步读取

wx.getStorage({
        key: "web111",
        success: res => {
            console.log("获取:", res);
            this.setData({
                result: res.data
            })
        }
    })

6. 异步

异步存储

try {
          wx.setStorageSync('sync', ['数组异步','sync代表异步'], )
      } catch (error) {
          console.log("存储失败:", error);
      }

异步读取

try {
      var value =  wx.getStorageSync('sync')
      console.log("异步读取:",value);
      this.setData({
        resultSync: value
    })
    } catch (error) {
        console.log("读取失败:", error);
    }

7. 后记

但是叫状态管理 有点不太合适,嘿嘿😋

用 mobx做状态管理 下篇文章见

补上mobox 文章链接


参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理;如有错误,欢迎交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
目录
打赏
0
0
0
0
3
分享
相关文章
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
68 1
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
142 4
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
88 3
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
48 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等