uniapp缓存的使用方法

在uniapp中如何使用缓存功能？具体有哪些API可以调用，比如localStorage和uni.setStorage有什么区别？缓存数据有大小限制吗？如何清除缓存？在不同平台上的兼容性如何？

2 回复

uniapp缓存使用uni.setStorageSync存数据，uni.getStorageSync取数据。例如存：uni.setStorageSync('key', 'value')；取：uni.getStorageSync('key')。简单快捷，适合存用户信息等小数据。


在 UniApp 中，缓存用于本地存储数据，提升应用性能。主要使用 uni.setStorage、uni.getStorage、uni.removeStorage 等方法。以下是具体用法和示例：

1. 设置缓存

使用 uni.setStorage 或 uni.setStorageSync（同步版本）存储数据。

// 异步存储
uni.setStorage({
  key: 'userInfo',
  data: { name: '张三', age: 25 },
  success: () => console.log('存储成功')
});

// 同步存储（推荐简单场景）
uni.setStorageSync('token', 'abc123');

2. 读取缓存

使用 uni.getStorage 或 uni.getStorageSync 获取数据。

// 异步读取
uni.getStorage({
  key: 'userInfo',
  success: (res) => console.log(res.data)
});

// 同步读取
const token = uni.getStorageSync('token');
console.log(token); // 输出：abc123

3. 删除缓存

使用 uni.removeStorage 或 uni.removeStorageSync 删除指定缓存。

// 异步删除
uni.removeStorage({
  key: 'userInfo',
  success: () => console.log('删除成功')
});

// 同步删除
uni.removeStorageSync('token');

4. 清空所有缓存

使用 uni.clearStorage 或 uni.clearStorageSync 清除全部数据。

// 异步清空
uni.clearStorage({
  success: () => console.log('缓存已清空')
});

// 同步清空
uni.clearStorageSync();

5. 获取缓存信息

使用 uni.getStorageInfo 获取缓存详情（如所有 key、当前大小）。

uni.getStorageInfo({
  success: (res) => {
    console.log(res.keys); // 所有存储的 key 列表
    console.log(res.currentSize); // 当前占用空间（KB）
  }
});

注意事项：

  • 数据限制：单个 key 允许存储最大 1MB 数据，总缓存不超过 10MB。
  • 数据安全：避免存储敏感信息（如密码），必要时加密。
  • 同步与异步：同步方法会阻塞线程，简单操作可用；异步方法适用于复杂逻辑。

示例场景：

// 登录后存储用户 token
uni.setStorageSync('token', 'user_login_token');

// 跳转页面时检查登录状态
const token = uni.getStorageSync('token');
if (!token) {
  uni.navigateTo({ url: '/pages/login/login' });
}

通过以上方法，可以高效管理 UniApp 的本地缓存，适用于用户信息、配置项等持久化需求。

回到顶部