wx.storage数据缓存

本文编辑：  toBeMN浏览 11748 6 版权所有，严禁转载

接口说明:

即通过调用接口

wx.setStorage（wx.setStorageSync）
wx.getStorage（wx.getStorageSync）
wx.removeStorage (wx.removeStorageSync)
wx.clearStorage（wx.clearStorageSync）
wx.getStorageInfo（wx.getStorageInfoSync）

对每个微信小程序的本地缓存（localStorage）进行增删改查的操作。目前本地缓存最大空间限制在10MB以内（从原先的5MB升级到10MB，意味着这不是最终大小，可能更改），同时，本地缓存将是永久存储的，不会随着用户的退出而清除，所以不建议将关键信息全部存在 localStorage，以防用户换设备的情况

同步方法会堵塞当前任务，直到同步方法处理返回。
异步方法不会塞当前任务。

故：如果异步存数据后立刻取数据代码段，则会出现取出空值，但缓存中却已有数据，当再一次取数据的时候又能成功取出的现象。这是因为异步执行不影响程序的执行，当执行取缓存数据的时候，数据还未及时存入到缓存中，因此取出空值，当再次取数据时，已有足够的时间让之前的数据存入缓存，因此取值正确。

同步、异步的使用场景：当存储过程不影响数据的展示使用异步已节省各方面的时间，相反情况则使用同步以保证程序业务逻辑的正确

接口用法：

【图片】

【代码】

wxml

<view class="container">
 <button hover-class="but-hover" bindtap="sync">同步存储后获取data1</button>
 <button hover-class="but-hover" bindtap="asyn">异步存储后获取data2</button>
 <button hover-class="but-hover" bindtap="update">修改缓存data1</button>
 <button hover-class="but-hover" bindtap="del_one">删除缓存data1</button>
 <button hover-class="but-hover" bindtap="del_all">删除所有缓存数据</button>
  <text>data1:{{data1}}</text> 
  <text>data2:{{data2}}</text> 
  <text>当前缓存信息:
{{det}}</text> 
</view>

js

var app = getApp()
Page({
  data:{
    data1:"",
    data2:"",
    det:""
  },
  onLoad:function(options){
    // 页面初始化获取缓存的数据
    var that=this;
    this.setData({
      data1: wx.getStorageSync('data1')||null,
      data2: wx.getStorageSync('data2')||null
    })
    //获取最新的缓存信息
    this.see()
  },
  sync:function(){
    // 同步存储后获取数据
    var that=this;
    wx.setStorageSync('data1','value1')
    wx.getStorage({
      key: 'data1',
      success: function(res){
        that.setData({
          data1: wx.getStorageSync('data1')||null,
          data2: wx.getStorageSync('data2')||null
        })
      }
    })
    this.see()
  },
  asyn:function(){
    // 异步存储后获取数据
    var that=this;
    wx.setStorage({
      key: 'data2',
      data: 'value2',
      success: function(res){
        // success
        console.log('success')
      }
    })
    that.setData({
      data1: wx.getStorageSync('data1')||null,
      data2:wx.getStorageSync('data2')||null
    })
    this.see()
  },
  update:function(){
    // 修改缓存data1
    wx.setStorageSync('data1','new_value1')
    this.setData({
      data1: wx.getStorageSync('data1')||null,
      data2: wx.getStorageSync('data2')||null
    })
    this.see()
  },
  del_one:function(){
    // 删除一条缓存数据
    wx.removeStorageSync('data1')
    this.setData({
      data1: wx.getStorageSync('data1')||null,
      data2: wx.getStorageSync('data2')||null
    })
    this.see()
  },
  del_all:function(){
    wx.clearStorageSync()
    this.setData({
      data1: wx.getStorageSync('data1')||null,
      data2: wx.getStorageSync('data2')||null
    })
    this.see()
  },
  see:function(){
    // 查看缓存信息
    var that=this;
    wx.getStorageInfo({
      success: function(res) {
        that.setData({
          det:'缓存中存在的key:'+res.keys+
          '
已缓存的数据大小:'+res.currentSize+'kb
'+
          '缓存限制的大小:'+res.currentSize+'kb'
        })
      }
    })
  }
})

wxss

page{
  height: 100%;
  width:100%;
}
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
button{
  width:500rpx;
  margin: 10rpx 0;
}
.but-hover{
  background-color: #5CB85C;
}

主要属性：

所有异步方法的参数皆是对象，故异步方法都有共同参数

特殊参数说明：

wx.setStorage(OBJECT)、wx.getStorageSync(KEY)
wx.removeStorage(OBJECT)、wx.removeStorageSync(KEY)

wx.getStorageInfo(OBJECT) 的success返回参数说明

（注：wx.getStorageInfoSync是同步获取故没有success参数）

wx.clearStorage()
清理本地数据缓存。

wx.clearStorageSync()
同步清理本地数据缓存