微信小程序入门（七）：缓存数据-单条数据

缓存数据

微信小程序的编写中，涉及到有些业务场景需要将数据缓存到本地，则微信小程序api提供了两个接口函数，

wx.setStorage
wx.setStorageSync

wx.setStorage（异步）

wx.setStorage可以将数据缓存在本地指定的key中，如果本地缓存已经存在指定的key，则会覆盖该key对应的内容，这是一个异步的接口，在调用时会涉及到成功，失败，完成三个状态，

wx.setStorage({
    key: '',
    data: '',
    success: function(res) {},
    fail: function(res) {},
    complete: function(res) {},
  })

key:本地缓存的key，是一个字符串，是缓存内容的标识
data:是缓存的内容，可以是字符串，也可以是object对象
success: 接口成功回调
fail:接口调用失败回调
complite:接口调用结束的回调

wx.setStorageSync （同步）

与wx.setStorage唯一不同的就是wx.setStorageSync是同步进行的，所以不会涉及到成功，失败，完成等回调，但是在使用时需要使用try.......catch....来捕获异常；

 try{
    wx.setStorageSync(key, data)
  }catch(e){
    console.log(e)
  }

现在编写一个将字符串缓存本地的例子

<view class='container'>
 

  <button bindtap='saveData'>SaveData</button>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    local_data:"save data"
  },

  saveData(e){
    wx.setStorage({
      key: 'local_data',
      data: this.data.local_data,
      success: function(res) {
        wx.showToast({
          title: '缓存成功',
          icon: 'none',
        })
      },
      fail: function(res) {
        wx.showToast({
          title: '缓存失败',
          icon: 'none',
        })
      },
      complete: function(res) {
        wx.showToast({
          title: '缓存完成',
          icon: 'none',
        })
      },
    })
  }
})

编译项目，点击缓存按钮：

6-1.png

6-2.png

现在改变缓存的内容，但是缓存的key保持不变

 data: {
    local_data:"new save data "
  },

6-3.png

可以看到第二次的内容把第一次覆盖了。

获取本地缓存数据

将内容缓存到本地之后，将其从本地提取展示出来，则可是使用微信小程序api提供的两个接口：wx.getStorageInfo(Object object)，wx.getStorageSync(string key)，与缓存同样，读取缓存也分同步和异步；

wx.getStorage（异步）

 wx.getStorage({
      key: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

wx.getStorageSync(同步)

 try{
      wx.getStorageSync(key)
    }catch(e){
      console.log(e)
    }

我们将刚刚存储到本地的数据展示到页面上：

getData(e){
    var that =this
    wx.getStorage({
      key: 'local_data',
      success: function(res) {
        wx.showToast({
          title: '获取成功',
          icon: 'none',
        })

        console.log(res)
        that.setData({
          show_local_data:res.data
        })
      },
      fail: function(res) {
        wx.showToast({
          title: '获取失败',
          icon: 'none',
        })
      },
      complete: function(res) {
        wx.showToast({
          title: '获取完成',
          icon: 'none',
        })
      },
    })
  }

<button bindtap='getData'>GetData</button>
  <view>本地缓存数据：{{show_local_data}}</view>

编译项目，点击按钮获取缓存数据并将其展示到页面上。

6-4.png

清除数据（单条数据，全部数据）

完成了本地数据的缓存，获取，则接下来就是关于缓存数据的清除，同样微信小程序api也提供了可使用的接口，

清除指定key的数据
- wx.removeStorage(异步)
- wx.removeStorageSync(同步)

wx.removeStorage({
  key: 'key',
  success(res) {
    console.log(res.data)
  }
})

try {
  wx.removeStorageSync('key')
} catch (e) {
  // Do something when catch error
}

清除全部缓存数据
- wx.clearStorage(异步)
- wx.clearStorageSync(同步)

wx.clearStorage()

try {
  wx.clearStorageSync()
} catch (e) {
  // Do something when catch error
}

至此微信小程序本地保存数据就此结束！