前端Vue篇之如何保存页面的当前的状态

目录

如何保存页面的当前的状态组件将被卸载：方法一：使用LocalStorage / SessionStorage方法二：路由传值 组件不会被卸载：方法三：单页面渲染方法四：使用Vue的keep-alive总结

---

如何保存页面的当前的状态

组件将被卸载：

方法一：使用LocalStorage / SessionStorage

优点:

兼容性好，不需要额外库或工具。简单快捷，基本可以满足大部分需求。

缺点:

状态通过 JSON 方法储存（相当于深拷贝），如果状态中有特殊情况（比如 Date 对象、Regexp 对象等）的时候会得到字符串而不是原来的值。如果从其他页面进入时，组件会重新读取Storage，可能导致意外行为。

假设有一个简单的待办事项列表组件，在组件即将被销毁时，我们可以使用componentWillUnmount生命周期函数来保存状态到LocalStorage。

componentWillUnmount() {  if (this.shouldSaveState) {    localStorage.setItem('todoList', JSON.stringify(this.state.todos));  }}

在这个例子中，当组件被销毁时，待办事项列表的状态会被保存在LocalStorage中。下次加载该组件时，可以从LocalStorage中读取状态，以便恢复待办事项列表的内容。

方法二：路由传值

优点:

可以传递 Date、RegExp 等特殊对象（不用担心 JSON.stringify / parse 的不足）。不会污染 LocalStorage / SessionStorage。

缺点:

如果 A 组件可以跳转至多个组件，那么在每一个跳转组件内都要写相同的逻辑。

假设我们有一个页面A，其中包含一个链接，点击链接后跳转至页面B，并携带特定的状态参数。

// 在页面A中<Link to={{ pathname: '/target', state: { data: /* your state here */ } }}>Go to Target</Link>// 在页面B中const currentState = this.props.location.state;// 可以使用currentState中的数据进行页面渲染或其他操作

在这个例子中，页面A通过路由传值的方式将特定的状态参数传递给页面B，页面B可以利用这些参数来呈现相应的内容或执行特定的操作。

组件不会被卸载：

方法三：单页面渲染

优点:

代码量少。不需要考虑状态传递过程中的错误。

缺点:

增加 A 组件维护成本。无法利用路由定位页面。

假设我们有一个父组件，其中包含多个子组件。我们希望切换子组件时能够保持各子组件的状态。

// 父组件中{this.state.activeComponent === 'Component1' && <Component1 />}{this.state.activeComponent === 'Component2' && <Component2 />}

在这个例子中，父组件根据状态动态地渲染不同的子组件，从而实现了在切换子组件时保持各子组件的状态。

方法四：使用Vue的keep-alive

优点: 在Vue中可以使用keep-alive来缓存页面，确保组件状态得到保留。

在Vue中，使用keep-alive可以缓存页面状态。例如，在路由视图中使用keep-alive可以确保组件状态得到保留。

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

在这个例子中，使用keep-alive可以使得路由视图中指定的组件状态得到保留，从而提高页面切换时的性能和用户体验。

总结

无论是利用浏览器历史记录、URL参数、本地存储，还是状态管理工具，都能有效保存页面状态。选择方法应基于应用需求和复杂性，以及对用户体验的要求。

持续学习总结记录中，回顾一下上面的内容：
如何保存页面的当前的状态的方法，包括使用LocalStorage/SessionStorage、路由传值、单页面渲染以及Vue的keep-alive。这些方法各有优缺点，选择方法应基于应用需求和复杂性，以及对用户体验的要求。LocalStorage/SessionStorage简单快捷，但可能会导致意外行为；路由传值适合传递特殊对象，但需要在每个跳转的组件内编写相同的逻辑；单页面渲染代码量少，但增加了维护成本；Vue的keep-alive可以缓存页面状态，提高页面切换性能和用户体验。

本文链接：https://www.kjpai.cn/news/2024-04-21/160883.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！