微信小程序精通到入门---03 全局数据和本地存储

微信小程序精通到入门---03 全局数据和本地存储

一、全局数据

1、全局数据的设置，访问获取，变更。

设置：在app.js设置，挂载到globalData属性下，比如

 globalData: {
    userInfo: null,
    sfs: [
      { sf: 1, sfmc: '湖南', check: true },
      { sf: 2, sfmc: '湖北', check: false },
      // ... 省略
    ]
  }

访问获取：通过var app = getApp()  app.globalData 

在页面js中
 
var app = getApp();  // 通过app.globalData访问全局数据

Page({

变更：

可以通过app.globalData直接变更即可。

2、案例

1) 在全局数据中设置了上面的省份列表。

2) 在temp.js的readey钩子函数获取并且处理数据

  onReady: function () {
    var sfs = app.globalData.sfs;
    var current_sfmc =  sfs.find(ele =>  ele.check == true ).sfmc;
    this.setData({
      sfs:sfs,
      current_sfmc:current_sfmc
    })
  },

3) 在页面渲染省份列表

.............................................


当前省份：{{current_sfmc}}
  
    {{item.sfmc}}
  

4) 在js编写changeSf的事件方法

 changeSf(e) {
    var sf = e.currentTarget.dataset.sf;
    var current_sfmc = null;
    app.globalData.sfs.forEach(ele=> {
      if(ele.sf == sf) {
        ele.check= true;
        current_sfmc = ele.sfmc;
      } else {
        ele.check= false;
      }
    });
    this.setData({
      current_sfmc:current_sfmc
    })
  },

3、效果

如果我们点击湖北省份，可以切换当前省份为湖北，并且如果我们返回主页面，再次进入temp页面时，这个省份还是湖北省，因为全局数据是在小程序生命周期一直存在的。

 

二、本地存储

1、Api

wx.setStorageSync(key, value)  设置

wx.getStorageSync(key)  获取

2、案例

 官方demo的logs案例

3、 本地存储说明

  小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。

  小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。

  由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储。

  通俗讲就是：本地存储空间有限，存储周期是永久存储，换设备不同步本地缓存，过期机制需要设置时间戳处理。