让页面"记住自己"——前端状态保留实战技巧

大家好，我是小杨，一个摸爬滚打了6年的前端老司机。今天咱们聊一个实际开发中高频出现的场景：从A页面跳转到B页面，返回时如何让A页面保持原来的状态？

你是不是也遇到过这种尴尬：用户在一个列表页翻了半天，点击详情看完返回后------好家伙！直接回到列表顶部，搜索条件、滚动位置全没了！用户体验直接负分。

别急，这就分享几个我实战中总结的解决方案，保准简单又好用！

方案一：keep-alive（Vue专属）

如果你是Vue开发者，这是最简单的方案：

javascript 复制代码

<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />
</template>

// 路由配置
{
  path: '/my-list',
  component: () => import('@/views/my-list.vue'),
  meta: { keepAlive: true } // 开启缓存
}

优点：开箱即用，组件状态（包括data、滚动位置等）自动保留
注意点：需要配合路由元信息使用，组件过多时可能占用内存

方案二：滚动位置记忆（通用方案）

对于需要精准控制滚动位置的场景：

javascript 复制代码

// 在离开页面时保存位置
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('list_scrollTop', window.scrollY);
});

// 页面加载时恢复
window.addEventListener('load', () => {
  const savedPosition = sessionStorage.getItem('list_scrollTop');
  if (savedPosition) window.scrollTo(0, parseInt(savedPosition));
});

适用场景 ：需要精确控制滚动位置的列表页
小杨提示：记得在页面卸载时清理storage，避免影响其他页面

方案三：状态管理全局托管（React/Vue通用）

以Vuex为例：

javascript 复制代码

// store.js
state: {
  listState: {
    searchParams: {},
    currentPage: 1,
    //...其他需要保持的状态
  }
}

// 在列表页使用
export default {
  mounted() {
    // 恢复状态
    if (this.$store.state.listState) {
      this.searchParams = { ...this.$store.state.listState.searchParams };
    }
  },
  beforeRouteLeave(to, from, next) {
    // 保存状态
    this.$store.commit('SAVE_LIST_STATE', {
      searchParams: this.searchParams,
      currentPage: this.currentPage
    });
    next();
  }
}

适用场景 ：需要保持复杂状态的页面
实战技巧：可以配合防抖优化，避免频繁提交到store

方案四：URL参数大法（SSR友好）

对于需要分享链接的场景：

javascript 复制代码

// 跳转前保存状态到URL
function goToDetail(item) {
  const params = new URLSearchParams();
  params.set('page', currentPage);
  params.set('search', searchKey);
  this.$router.push(`/detail/${item.id}?${params.toString()}`);
}

// 返回时从URL读取
created() {
  const query = this.$route.query;
  if (query.page) this.currentPage = Number(query.page);
  //...
}

优点：状态可分享，刷新不丢失
注意：敏感数据不要放URL，适合简单参数

小杨的选型建议

简单页面 → 直接用keep-alive
需要精准滚动控制 → 方案二+方案三组合
需要SEO/分享 → 优先URL参数方案
超复杂状态 → 考虑Pinia/Vuex持久化插件

最近我在做一个电商后台项目，就遇到了商品列表的筛选条件保持需求。最终采用方案三+方案二组合：用Vuex管理筛选表单，配合sessionStorage存滚动位置，用户反馈体验丝滑~

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！