微信小程序开发——本地缓存

前言

本地缓存是指微信小程序存储在当前设备空间里地数据。在官方文档说明中，其所有的数据存储上限为10MB即单个小程序的存储空间上限为10MB。在使用过程中用户使用本地缓存可以存储一些非重要性的生产操作，例如让小程序再次打开能快速渲染页面，减少用户等待时间。

快速上手

小程序提供了读写删本地缓存的方法：

• wx.setStorageSync/wx.setStorage 写数据到本地缓存
• wx.removeStorageSync/wx.removeStorage 根据key移除本地缓存
• wx.getStorageSync/wx.getStorage 根据key获取指定缓存
• wx.clearStorageSync/wx.clearStorage 清除本地缓存
  其中Sync结尾的表示同步接口

关于同步缓存和异步缓存的区别
异步与同步的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。

写入本地缓存

//异步接口    
    wx.setStorage({
      key: 'key1',
      data: 'value1',
      success:function(){
          console.log("写入value1成功！")     
      },fail:function(){
          console.log("写入value1失败！")     
      }
    })


    //同步接口 只有1执行成功才会执行2或3
    try{
      wx.setStorageSync("key", "value2")      //1
      console.log("写入value2成功！")          //2
    }catch(e){
      console.log("写入value2失败！")         //3
    }

根据key读取本地缓存

    //异步接口    
    wx.getStorage({
      key: 'key1',
      success: function (res) {
        // 异步接口在success回调才能拿到返回值
        var value1 = res.data
      },
      fail: function () {
        console.log('读取key1失败')
      }

    })


    //同步接口
    try {
      // 同步接口立即返回值
      var value2 = wx.getStorageSync('key2')
    } catch (e) {
      console.log('读取key2失败')
    }

根据key移除本地缓存

//异步接口    
    wx.removeStorage({
      key: 'key1',
      success(res) {
        console.log("key为key1的缓存清除成功！")
      },fail:function(){
        console.log("key为key1的缓存清除失败！")
      }
    })


    //同步接口
    try {
      wx.removeStorageSync('key2')
      console.log("key值为2的缓存清除成功！")
    } catch (e) {
      console.log("key值为2的缓存清除失败！")
    }

清除本地所有缓存

	//异步接口    
    wx.clearStorage()


    //同步接口
    try {
      wx.clearStorageSync()
      console.log("清除本地所有缓存成功！！")
    } catch (e) {
     console.log("清除本地所有缓存失败！")
    }

最后，还要注意的一点是如果写入了同样key的缓存数据，后写的会覆盖了前者，因此需要我们注意一下