uni-app框架核心/常用API梳理一（数据缓存）

前面一篇关于uni-app快速上手文章，已经介绍的开发流程/开发注意事项已经对于新手快速上车已经是没问题的了。。。本文继续介绍常用的核心的一些API用法注意事项~

数据缓存

在 UniApp 中，数据缓存可以通过多种方式实现，主要取决于你想要缓存的数据类型、缓存的生命周期以及使用场景。以下是几种常用的数据缓存方法和实际缓存位置：

本地存储（Local Storage）：
- uni.setStorage 和 uni.getStorage：用于将数据存储在本地，并且没有过期时间限制，除非用户清除浏览器缓存或主动删除。适用于需要长期保存的数据。
- uni.setStorageSync 和 uni.getStorageSync：同步版本的方法，直接返回结果而不使用回调函数。
会话存储（Session Storage）：
- uni.setStorageSync 和 uni.getStorageSync 也可以用于模拟会话存储的行为，即数据只在当前会话中有效，关闭页面或浏览器后数据会被清除。但是请注意，真正的会话存储行为需依赖于浏览器环境，在某些情况下（如小程序环境中），可能需要自定义逻辑来实现类似效果。
Vuex 状态管理：
- Vuex 是 Vue.js 的官方状态管理模式和库。它采用集中式存储管理应用的所有组件的状态。虽然 Vuex 中的数据不会自动持久化，但你可以结合本地存储的方式，在应用启动时从本地加载数据到 Vuex 中，然后在适当的时候保存 Vuex 中的数据到本地存储。
临时缓存（Memory Cache）：
- 使用 JavaScript 对象或其他形式的内存结构来缓存数据。这种方式下的数据仅存在于当前页面实例中，刷新页面或离开页面后数据将会丢失。适合短期存储，例如页面内的临时状态。
Cookie：
- 虽然不是直接由 UniApp 提供的功能，但在某些平台上（如H5），你可以通过原生 JavaScript API 来操作 Cookie。Cookies 可以设置过期时间和路径等属性，常用于存储少量的数据，如用户登录信息。
第三方插件：
- 存在一些第三方插件可以帮助更方便地管理缓存，比如可以自动处理本地存储中的数据序列化/反序列化、设置过期时间等功能。

选择哪种缓存方式应该基于你的具体需求，包括数据的大小、缓存的时间长度、跨页面访问的需求等因素。对于大多数移动应用来说，uni.setStorage 和 uni.getStorage 是最常用的缓存手段，因为它们简单易用并且能很好地适应不同平台的需求。

uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

js 复制代码

uni.setStorage({
    key: 'storage_key',
    data: '异步apis缓存的数据',
    success: function () {
       console.log('success');
    }
});

uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

js 复制代码

uni.setStorage({
    key: 'storage_key',
    data: '异步apis缓存的数据',
    success: function () {
         console.log('success');
    }
});

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

js 复制代码

uni.setStorageSync('name', '同步缓存数据');
// or
try {
    uni.setStorageSync('name', '同步缓存数据');
} catch (e) {
    // error
}

uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

js 复制代码

const value = uni.getStorageSync('name');
console.log(value, '获取同步缓存数据');
// or
try {
    const value = uni.getStorageSync('name');
    if (value) {
       console.log(value);
    }
} catch (e) {
    // error
}

uni.getStorageInfo 和 uni.getStorageInfoSync 是 UniApp 提供的用于获取本地存储信息的 API。它们的主要区别在于同步和异步的执行方式。

`uni.getStorageInfo`

异步调用：该方法是异步的，它不会阻塞主线程，意味着在等待获取存储信息的同时，页面上的其他操作仍然可以继续进行。
使用场景：当你不介意稍后处理结果，并且希望避免阻塞用户界面时，应该使用这个方法。
回调函数：你需要提供一个回调函数来处理返回的数据，包括所有已保存的键名及其详细信息（如占用空间大小等）。

示例代码 ：

javascript 复制代码

uni.getStorageInfo({
  success: function (res) {
    console.log('Keys:', res.keys);
    console.log('CurrentSize:', res.currentSize);
    console.log('limitSize:', res.limitSize);
  }
});

`uni.getStorageInfoSync`

同步调用：该方法是同步的，会立即返回结果，在此期间，其他代码的执行会被阻塞直到获取到存储信息为止。
使用场景：当你需要立刻获得存储信息，并且愿意接受可能带来的短暂性能影响时，可以选择使用同步版本。
直接返回结果：不需要回调函数，可以直接通过返回值获取数据。

示例代码 ：

javascript 复制代码

try {
  const res = uni.getStorageInfoSync();
  console.log('Keys:', res.keys);
  console.log('CurrentSize:', res.currentSize);
  console.log('LimitSize:', res.limitSize);
} catch (e) {
  // 错误处理
  console.error(e);
}

返回结果

两者都会返回一个对象，包含以下字段：

keys: 一个数组，包含所有本地存储的键名。
currentSize: 当前使用的存储空间大小（单位为 KB）。
limitSize: 本地存储的最大限制大小（单位为 KB）。请注意，不同平台可能有不同的限制。

选择使用哪个方法取决于你的具体需求。如果你的应用逻辑允许非阻塞的操作，并且你更倾向于使用更现代的编程模式，那么你应该优先考虑使用 uni.getStorageInfo。而如果你确实需要立即得到结果，并且可以接受可能的短暂卡顿，则可以使用 uni.getStorageInfoSync。

uni.removeStorage 和 uni.removeStorageSync 是 UniApp 提供的用于移除本地存储中特定键值对的 API。两者的功能是相同的，主要区别在于调用方式的不同：异步与同步。

`uni.removeStorage`

异步调用 ：该方法是非阻塞的，它不会等待操作完成就继续执行后续代码。这意味着页面上的其他操作可以继续进行，而不需要等待移除操作的结果。
回调机制：你需要提供一个回调函数来处理成功或失败的情况。
适用场景：当你不介意稍后处理结果，并且希望避免阻塞用户界面时，应该使用这个方法。

示例代码 ：

javascript 复制代码

uni.removeStorage({
  key: 'your_key', // 要移除的数据的键名
  success: function (res) {
    console.log('移除成功');
  },
  fail: function (err) {
    console.error('移除失败', err);
  }
});

`uni.removeStorageSync`

同步调用 ：该方法是阻塞式的，它会立即返回结果，在此期间，其他代码的执行会被暂停直到移除操作完成。
直接返回结果：不需要回调函数，可以直接通过捕获异常或检查返回值的方式处理结果。
适用场景：当你需要立刻得到操作结果，并且愿意接受可能带来的短暂性能影响时，可以选择使用同步版本。

示例代码 ：

javascript 复制代码

try {
  uni.removeStorageSync('your_key'); // 要移除的数据的键名
  console.log('移除成功');
} catch (e) {
  // 错误处理
  console.error('移除失败', e);
}

使用建议

选择使用哪个方法取决于你的具体需求和应用逻辑。如果你的应用逻辑允许非阻塞的操作，并且你更倾向于使用更现代的编程模式（如 Promise 或 async/await），那么你应该优先考虑使用 uni.removeStorage。而如果你确实需要立即得到结果，并且可以接受可能的短暂卡顿，则可以使用 uni.removeStorageSync。

需要注意的是，在大多数情况下，推荐使用异步的方法 (uni.removeStorage) 来保持用户体验的流畅性，尤其是在移动设备上，因为同步操作可能会导致界面卡顿。

`uni.clearStorage和uni.clearStorageSync`

uni.clearStorage（清理本地数据缓存异步）和uni.clearStorageSync（清理本地数据缓存同步） 解释同上一个同步一个异步

注意缓存方案差异

uni-app的Storage在不同端的实现不同：

H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
百度小程序策略详见、抖音小程序策略详见
非App平台清空Storage会导致uni.getSystemInfo获取到的deviceId改变

除此之外，其他数据存储方案：

H5端还支持websql、indexedDB、sessionStorage
App端还支持SQLite、IO文件等本地存储方案。