uni-app 数据缓存详解

uni-app 提供了多种数据缓存方案，帮助开发者在本地存储应用数据，提升用户体验和应用性能。

1. 永久缓存 - Storage API

基本操作

设置缓存

javascript 复制代码

// 异步设置缓存
uni.setStorage({
  key: "user_info",
  data: { name: "Tom", age: 18 },
  success: function () {
    console.log("存储成功");
  },
});

// 同步设置缓存
try {
  uni.setStorageSync("user_token", "abc123");
  console.log("存储成功");
} catch (e) {
  console.error("存储失败", e);
}

获取缓存

javascript 复制代码

// 异步获取缓存
uni.getStorage({
  key: "user_info",
  success: function (res) {
    console.log(res.data);
  },
});

// 同步获取缓存
try {
  const data = uni.getStorageSync("user_token");
  console.log(data);
} catch (e) {
  console.error("获取失败", e);
}

删除缓存

javascript 复制代码

// 删除指定缓存
uni.removeStorage({
  key: "user_info",
  success: function (res) {
    console.log("删除成功");
  },
});

// 同步删除缓存
try {
  uni.removeStorageSync("user_token");
} catch (e) {
  console.error("删除失败", e);
}

清空所有缓存

javascript 复制代码

// 清空所有缓存
uni.clearStorage();

// 同步清空所有缓存
try {
  uni.clearStorageSync();
} catch (e) {
  console.error("清空失败", e);
}

2. 临时缓存 - 内存存储

对于页面间临时数据传递，可使用内存存储：

javascript 复制代码

// 页面跳转时传递参数
uni.navigateTo({
    url: '/pages/detail/detail?userId=123'
});

// 在目标页面接收参数
onLoad(options) {
    const userId = options.userId;
}

3. 缓存管理最佳实践

缓存策略设计

用户信息 : 使用 uni.setStorage 永久存储，设置过期时间
页面状态: 使用内存存储或 Vuex 状态管理
配置信息: 永久存储，定期更新

缓存封装工具类

javascript 复制代码

// utils/storage.js
export default {
  // 设置带过期时间的缓存
  set(key, data, expire = 0) {
    const value = {
      data,
      expire: expire ? Date.now() + expire : 0,
    };
    try {
      uni.setStorageSync(key, value);
      return true;
    } catch (e) {
      console.error("存储失败:", e);
      return false;
    }
  },

  // 获取缓存（自动判断是否过期）
  get(key) {
    try {
      const value = uni.getStorageSync(key);
      if (value) {
        // 判断是否过期
        if (value.expire === 0 || value.expire > Date.now()) {
          return value.data;
        } else {
          // 过期则删除
          uni.removeStorageSync(key);
        }
      }
      return null;
    } catch (e) {
      console.error("获取失败:", e);
      return null;
    }
  },

  // 删除缓存
  remove(key) {
    try {
      uni.removeStorageSync(key);
      return true;
    } catch (e) {
      console.error("删除失败:", e);
      return false;
    }
  },
};

4. 注意事项

存储限制: 不同平台存储上限不同，H5 一般为 5MB 左右
数据安全: 敏感信息不建议明文存储，应加密后保存
性能考虑: 频繁读写会影响性能，合理使用缓存策略
兼容性: 各平台 API 可能存在差异，需做好兼容处理

5. 实际应用场景

用户登录状态保持

javascript 复制代码

// 登录成功后保存用户信息
loginSuccess(userInfo) {
    storage.set('user_info', userInfo, 7 * 24 * 60 * 60 * 1000); // 7天过期
}

// 页面加载时检查登录状态
checkLoginStatus() {
    const userInfo = storage.get('user_info');
    if (userInfo) {
        // 已登录，更新全局状态
        this.$store.commit('setUserInfo', userInfo);
    } else {
        // 未登录，跳转到登录页
        uni.redirectTo({ url: '/pages/login/login' });
    }
}

页面数据缓存提升体验

javascript 复制代码

// 列表页面数据缓存
onShow() {
    // 尝试从缓存获取数据
    const cachedData = storage.get('product_list');
    if (cachedData) {
        this.productList = cachedData;
    } else {
        // 缓存不存在则请求网络数据
        this.fetchProductList();
    }
},

async fetchProductList() {
    const res = await api.getProductList();
    this.productList = res.data;
    // 存入缓存，10分钟过期
    storage.set('product_list', res.data, 10 * 60 * 1000);
}

通过合理运用这些缓存机制，可以显著提升 uni-app 应用的性能和用户体验。