一看就懂的 UniApp 数据缓存 API：一篇文章带你玩转本地存储！

UniApp 数据缓存 API 全面解析与最佳实践

在多平台跨端开发中，数据缓存是不可或缺的功能。UniApp 提供了一套强大的数据缓存 API，支持本地数据的存储、读取、删除和管理，适用于多种开发场景。本文将详细介绍这些 API 的功能、参数及使用方法，并分享一些实际开发中的应用技巧。

数据缓存 API 总览

UniApp 提供了两类缓存操作：同步操作和异步操作。下表列出了主要方法及其功能：

功能 同步 API 异步 API
存储数据 uni.setStorageSync uni.setStorage
获取数据 uni.getStorageSync uni.getStorage
移除指定数据 uni.removeStorageSync uni.removeStorage
清除所有缓存 uni.clearStorageSync uni.clearStorage
获取缓存信息 uni.getStorageInfoSync uni.getStorageInfo

API 参数说明

以下是数据缓存 API 的详细参数及说明，适用于所有异步操作方法：

参数名 类型 必填 说明
key string 是 缓存的键名，用于标识数据
data any 否 要存储的数据，适用于 setStorage 系列
success Function 否 操作成功时的回调函数
fail Function 否 操作失败时的回调函数
complete Function 否 操作完成时的回调函数，无论成功或失败均触发

注意： data 参数仅适用于存储操作方法，如 uni.setStorage 和 uni.setStorageSync。

方法详解与代码示例

1. 存储数据

异步存储数据：uni.setStorage

uni.setStorage({
  key: 'userInfo',
  data: { name: 'Alice', age: 25 },
  success: () => {
    console.log('数据存储成功！');
  },
  fail: (err) => {
    console.error('存储失败：', err);
  },
  complete: () => {
    console.log('存储操作完成');
  },
});

同步存储数据：uni.setStorageSync

try {
  uni.setStorageSync('userInfo', { name: 'Alice', age: 25 });
  console.log('同步存储成功！');
} catch (err) {
  console.error('同步存储失败：', err);
}

2. 读取数据

异步读取数据：uni.getStorage

uni.getStorage({
  key: 'userInfo',
  success: (res) => {
    console.log('获取的数据：', res.data);
  },
  fail: (err) => {
    console.error('获取数据失败：', err);
  },
  complete: () => {
    console.log('数据获取完成');
  },
});

同步读取数据：uni.getStorageSync

try {
  const data = uni.getStorageSync('userInfo');
  console.log('同步获取的数据：', data);
} catch (err) {
  console.error('同步获取失败：', err);
}

3. 删除数据

异步删除指定数据：uni.removeStorage

uni.removeStorage({
  key: 'userInfo',
  success: () => {
    console.log('数据移除成功！');
  },
  fail: (err) => {
    console.error('移除失败：', err);
  },
  complete: () => {
    console.log('移除操作完成');
  },
});

同步删除指定数据：uni.removeStorageSync

try {
  uni.removeStorageSync('userInfo');
  console.log('同步移除成功！');
} catch (err) {
  console.error('同步移除失败：', err);
}

4. 清除所有缓存

异步清除缓存：uni.clearStorage

uni.clearStorage({
  success: () => {
    console.log('缓存已清除！');
  },
  fail: (err) => {
    console.error('清除失败：', err);
  },
  complete: () => {
    console.log('清除缓存操作完成');
  },
});

同步清除缓存：uni.clearStorageSync

try {
  uni.clearStorageSync();
  console.log('同步清除缓存成功！');
} catch (err) {
  console.error('同步清除缓存失败：', err);
}

5. 获取缓存信息

异步获取缓存信息：uni.getStorageInfo

uni.getStorageInfo({
  success: (res) => {
    console.log('所有键名：', res.keys);
    console.log('当前缓存大小：', res.currentSize, 'KB');
    console.log('最大允许缓存大小：', res.limitSize, 'KB');
  },
  fail: (err) => {
    console.error('获取缓存信息失败：', err);
  },
  complete: () => {
    console.log('缓存信息获取完成');
  },
});

同步获取缓存信息：uni.getStorageInfoSync

try {
  const info = uni.getStorageInfoSync();
  console.log('所有键名：', info.keys);
  console.log('当前缓存大小：', info.currentSize, 'KB');
  console.log('最大允许缓存大小：', info.limitSize, 'KB');
} catch (err) {
  console.error('同步获取缓存信息失败：', err);
}

实用技巧与注意事项

  1. 缓存大小限制

    • 小程序端缓存通常有限制。例如，微信小程序最大允许 10MB 缓存。
    • 可通过 uni.getStorageInfo 查看当前缓存使用情况，并定期清理不必要的数据。

  2. 数据存储格式

    • 缓存数据可以是任意类型，但建议复杂对象使用 JSON 格式存储：
      uni.setStorageSync('config', JSON.stringify({ theme: 'dark', lang: 'en' }));
const config = JSON.parse(uni.getStorageSync('config'));

  3. 异步 vs. 同步

    • 异步方法：适用于耗时任务，不阻塞主线程。
    • 同步方法：适用于初始化加载等必须即时完成的操作，但可能影响性能。

  4. 跨平台一致性

    • 不同平台对缓存的实现可能略有差异（如缓存大小限制），在开发中需充分测试以确保功能一致。

总结

UniApp 的数据缓存 API 提供了高效、灵活的本地存储解决方案，适用于跨端开发中的各种场景。无论是用户数据管理还是应用配置保存，这些方法都能帮助开发者优化性能和用户体验。熟练掌握这些 API，可以为你的应用开发增添更多可能性。

希望本文能为你提供帮助，欢迎分享你的开发经验或提出疑问！

posted @ 2024-11-20 18:52  Xmx11  阅读(65)  评论(0)  编辑  收藏  举报