本文編輯：  toBeMN瀏覽 12190 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()
同步清理本地數據緩存