小程序本地存储实现方法

开发小程序时，本地存储是绕不开的一个环节，无论是缓存用户偏好、临时数据还是离线内容，它都扮演着关键角色。下面来详细梳理一下微信小程序提供的本地存储相关API，看看同步和异步两种模式下分别有哪些方法可用。

数据支持

需要存储的内容类型有明确限制：只支持原生类型、Date对象，以及那些能够通过JSON.stringify序列化的对象。简单来说，字符串、数字、布尔值、日期、普通对象（不含函数、undefined等）都可以直接存，但复杂循环引用对象就不行了。

方法

微信小程序的本地存储API分为同步和异步两组，同步方法会阻塞后续代码执行直到操作完成，而异步方法则通过回调处理结果，不会阻塞主线程。实际开发中可以根据场景灵活选择，下面分别列出。

同步方法

同步方法需要包裹在try...catch中捕获异常，使用时注意不要在主流程中频繁调用以免阻塞UI。

（1）wx.setStorageSync() — 存储值

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

（2）wx.removeStorageSync() — 移除指定的值

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

（3）wx.getStorageSync() — 获取值

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

（4）wx.getStorageInfoSync() — 获取当前 storage 中所有的 key

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

（5）wx.clearStorageSync() — 清除所有的 key

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

异步方法

异步方法通过回调函数（success、fail、complete）来处理结果，不会阻塞后续代码，适合在用户操作响应较快或需要批量操作时使用。

（1）wx.setStorage() — 存储值

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容。需要注意的是，数据存储生命周期跟小程序本身一致——除非用户主动删除或超过一定时间被自动清理，否则数据会一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

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

（2）wx.removeStorage() — 移除指定的值

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

（3）wx.getStorage() — 获取值

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

（4）wx.getStorageInfo() — 获取当前 storage 中所有的 key

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

（5）wx.clearStorage() — 清除所有的 key

wx.clearStorage()