uniapp 缓存的使用方法和技巧

“在uniapp开发中，如何正确使用缓存功能？有哪些常见的缓存方法和技巧可以提高应用性能？比如数据缓存、图片缓存和页面缓存的具体实现方式是什么？另外，缓存的清除策略和容量限制又该如何设置？希望能分享一些实际项目中的最佳实践和注意事项。”

2 回复

uniapp缓存使用：

  1. 存数据：uni.setStorageSync('key', data)
  2. 取数据：uni.getStorageSync('key')
  3. 删数据：uni.removeStorageSync('key')
  4. 清空：uni.clearStorageSync()

技巧：

  • 同步方法简单，异步用setStorage避免卡顿
  • 存前用JSON.stringify，取时用JSON.parse
  • 定期清理，避免超限（小程序限制10MB）

在 UniApp 中，缓存主要用于本地存储数据，提升应用性能及用户体验。以下是使用方法和技巧：

一、使用方法

UniApp 提供了异步和同步两种缓存 API，基于微信小程序的存储机制。

  1. 异步方法（推荐，避免阻塞）：

    • 设置缓存：uni.setStorage({ key: 'key', data: value })
    • 获取缓存：uni.getStorage({ key: 'key', success: (res) => { console.log(res.data) } })
    • 移除缓存：uni.removeStorage({ key: 'key' })
    • 清空缓存：uni.clearStorage()

  2. 同步方法（适用于简单操作）：

    • 设置缓存：uni.setStorageSync('key', value)
    • 获取缓存：const data = uni.getStorageSync('key')
    • 移除缓存：uni.removeStorageSync('key')
    • 清空缓存：uni.clearStorageSync()

二、使用技巧

  1. 数据序列化：存储对象或数组时，使用 JSON.stringify() 和 JSON.parse() 转换：

    // 存对象
uni.setStorageSync('user', JSON.stringify({ name: '张三' }));
// 取对象
const user = JSON.parse(uni.getStorageSync('user'));

  2. 缓存大小限制：单个 key 允许最大 1MB，总缓存不超过 10MB。避免存储大型数据（如图片），可使用 uni.saveFile 存为本地文件。

  3. 错误处理：异步方法建议添加 fail 回调：

    uni.setStorage({
  key: 'key',
  data: 'value',
  fail: (err) => { console.error('存储失败', err); }
});

  4. 数据安全：避免存储敏感信息（如密码、token）。必要时加密存储或使用 UniApp 的 uni.setStorageSync 结合安全模块。

  5. 缓存更新策略：设置过期时间，定期清理：

    // 存储带时间戳的数据
const data = { value: 'data', expire: Date.now() + 3600000 }; // 1小时后过期
uni.setStorageSync('key', JSON.stringify(data));

// 读取时检查过期
const stored = JSON.parse(uni.getStorageSync('key'));
if (stored && stored.expire > Date.now()) {
  console.log('数据有效', stored.value);
} else {
  uni.removeStorageSync('key'); // 清除过期数据
}

  6. 性能优化：高频数据使用同步方法，低频或大数据用异步方法。结合 uni.getStorageInfo() 监控缓存使用情况。

注意事项

  • 缓存数据在应用卸载时会被清除。
  • H5 端依赖浏览器 localStorage，大小限制可能不同。
  • 使用 Promise 封装异步方法，提升代码可读性。

通过合理使用缓存，可减少网络请求，加快应用响应速度。

回到顶部