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

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

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

数据缓存 API 总览

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

API 参数说明

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

注意： 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，可以为你的应用开发增添更多可能性。

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