uniapp 页面缓存如何实现

在uniapp中，如何实现页面缓存功能？比如从列表页进入详情页后返回，希望列表页保持之前的状态而不重新加载。官方提供的keep-alive在uniapp里好像不直接支持，应该通过什么方案来实现类似效果？求具体实现方法或示例代码。

2 回复

在uniapp中，页面缓存可通过配置pages.json实现。在需要缓存的页面路径下添加"keepAlive": true即可。例如：

{
  "path": "pages/index/index",
  "style": {
    "keepAlive": true
  }
}

这样页面跳转时会被缓存，返回时保持状态。


在 UniApp 中，页面缓存可以通过以下几种方式实现，适用于不同场景：

1. 全局数据缓存（Storage API）

使用 uni.setStorageSync 和 uni.getStorageSync 存储数据到本地，适合长期保存。

// 存储数据
uni.setStorageSync('key', 'value');

// 读取数据
let data = uni.getStorageSync('key');

// 清除数据
uni.removeStorageSync('key');

2. 页面间数据传递（EventBus）

使用全局事件机制，适合临时共享数据。

// 发送事件
uni.$emit('eventName', data);

// 监听事件
uni.$on('eventName', callback);

// 移除监听
uni.$off('eventName');

3. Vuex 状态管理

适合复杂应用的状态管理，数据在页面间共享。

// store.js
export default new Vuex.Store({
  state: { data: null },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    }
  }
});

// 页面中使用
this.$store.commit('setData', data);
let cachedData = this.$store.state.data;

4. 页面栈数据缓存

通过 getCurrentPages() 获取页面实例，直接设置或读取数据。

let pages = getCurrentPages();
let currentPage = pages[pages.length - 1];
currentPage.$vm.pageData = data; // 存储数据

5. keep-alive 组件（仅H5端）

在 H5 端可使用 Vue 的 keep-alive 缓存组件状态。

<keep-alive>
  <router-view></router-view>
</keep-alive>

注意事项：

  • Storage 有大小限制（通常 10MB），适合关键数据。
  • Vuex 和 EventBus 数据在页面刷新后丢失，适合运行时状态。
  • 根据需求选择合适方式，避免过度缓存导致性能问题。

以上方法灵活组合，可高效实现页面数据缓存。

回到顶部