微信小程序——数据缓存

微信小程序数据缓存

参考微信官方文档：

https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

小程序的使用场景

微信小程序在获取用户授权后，获取用户的昵称和头像且会从数据库查询两个值显示到首页页面。（token，code）已经取得授权的情况下刷新，可以不弹框直接获取昵称和头像。此时也需要将数据库中的值显示到首页页面。显然，再次向后台发出请求，获取数据库中的值是无法实现的。因为在页面显示的变量名是固定的，两次请求返回的值赋给同一个变量无法实现，且网络请求的先后顺序也不能确定。【此种情况，就需要将首次查询（点击授权按钮）的值存入到本地缓存中】当再次刷新时，将缓存中的值显示到页面上。

---

HTML5出现之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，HTML以后又5增加了新的缓存机制，即localStorage 和 sessionStorage，具体的介绍就不在多说。在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。

wx.setStorageSync(string key, any data) 【wx.setStorage 的同步版本】

示例代码

wx.setStorage({
  key:"key",
  data:"value"
})



try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

		参数：
		  key : 本地缓存中指定的(string)
		  
		  data: 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

wx.setStorage(Object object)

	将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因
	存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，
	所有数据存储上限为 10MB。

示例代码

wx.setStorage({
  key:"key",
  data:"value"
})



try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

参数

属性	类型	默认值	必填	说明
key	string		是	本地缓存中指定的 key
data	any		是	需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
success	function		是	接口调用成功的回调函数
fail	function		是	接口调用失败的回调函数
complete	function		是	接口调用结束的回调函数（调用成功、失败都会执行）

wx.removeStorageSync(string key) 【wx.removeStorage 的同步版本】

示例代码

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



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

参数：
	key ：本地缓存中指定的 key（string ）

wx.removeStorage(Object object) 【从本地缓存中移除指定 key】

代码示例

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



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

参数：

属性	类型	默认值	必填	说明
key	string		是	本地缓存中指定的 key
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

any wx.getStorageSync(string key) 【wx.getStorage 的同步版本】

代码示例

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


try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

参数：key:本地缓存中指定的 key(string)

			返回值
	  data:  key对应的内容

Object wx.getStorageInfoSync() 【wx.getStorageInfo 的同步版本】

代码示例

	参数 -------  返回值

wx.getStorageInfo({
  success (res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})


try {
  const res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // Do something when catch error
}

属性	类型	说明
keys	Array.	当前 storage 中所有的 key
currentSize	number	当前占用的空间大小, 单位 KB
limitSize	number	限制的空间大小，单位 KB

wx.getStorageInfo(Object object) 【异步获取当前storage的相关信息】

代码示例

wx.getStorageInfo({
  success (res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }
})
try {
  const res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
} catch (e) {
  // Do something when catch error
}

参数

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

|Object object

属性	类型	说明
keys	Array.	当前 storage 中所有的 key
currentSize	number	当前占用的空间大小, 单位 KB
limitSize	number	限制的空间大小，单位 KB

wx.getStorage(Object object) 【从本地缓存中异步获取指定 key 的内容】

代码示例

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


try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

 参数	Object object

属性	类型	默认值	必填	说明
key	string		是	本地缓存中指定的 key
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

	参数Object res

属性	类型	说明
data	any	key对应的内容

####### wx.clearStorageSync() 【wx.clearStorage 的同步版本】

代码示例

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

wx.clearStorage(Object object) 【清理本地数据缓存】

示例代码

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

参数     Object object

属性	类型	默认值	必填	说明
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）