瞬间穿梭，回到时光的原点，路由页面跳转后状态保存的秘籍

在开发业务需求过程中经常会碰到一种情况——在一个页面（通常是表格页）进行一顿猛如虎的操作之后，点击某一项详情进入另外一个页面之后再返回（点击后退按钮），上一页还可以保持原先的状态不变（页面、搜索词等）。这种情况在电商网站、门户网站等应用中非常常见。这样的需求是为了用户体验，试想一下当你辛辛苦苦填写了一大堆表格信息，结果因为点击了一个链接而导致这些信息全部丢失，你是否会抓狂？

路由页面跳转后状态保存的原理

想要实现路由页面跳转后状态保存，就需要了解浏览器的历史栈（history stack）的工作原理。浏览器历史栈是一个先进后出的栈，当用户在浏览器中打开一个新的页面时，该页面的地址就会被压入历史栈中。当用户点击后退按钮时，历史栈中的上一条记录就会被弹出，浏览器就会加载该记录对应的页面。

实现路由页面跳转后状态保存的几种方法

1. 利用浏览器历史栈API

浏览器历史栈API提供了几个方法来操作历史栈，我们可以利用这些方法来实现路由页面跳转后状态保存。

• pushState()方法：将一个新的状态压入历史栈，并不会触发浏览器的页面刷新。
• replaceState()方法：用一个新的状态替换当前历史栈中的状态，也不会触发浏览器的页面刷新。
• popState()方法：从历史栈中弹出最上面的状态，并触发浏览器的页面刷新。

我们可以通过在路由页面跳转时使用pushState()方法来将当前页面的状态保存到历史栈中，当用户点击后退按钮时，popState()方法就会被触发，并加载历史栈中的上一条记录，从而实现页面状态的保存。

2. 利用SessionStorage或LocalStorage

SessionStorage和LocalStorage是两种浏览器提供的存储机制，可以用来存储数据。SessionStorage的数据只在当前浏览器窗口中有效，当浏览器窗口关闭后，数据就会被清空。LocalStorage的数据则会一直保存，直到用户手动清除或浏览器清除缓存。

我们可以通过在路由页面跳转时将当前页面的状态存储到SessionStorage或LocalStorage中，当用户点击后退按钮时，从SessionStorage或LocalStorage中加载数据，并恢复页面的状态。

3. 利用后端服务

如果需要保存的数据量比较大，或者需要在不同的浏览器窗口或设备之间共享数据，可以使用后端服务来保存数据。

我们可以通过在路由页面跳转时将当前页面的状态发送到后端服务，后端服务将数据保存到数据库中。当用户点击后退按钮时，从后端服务加载数据，并恢复页面的状态。

总结

路由页面跳转后状态保存的实现方法有很多种，我们可以根据实际需求选择合适的方法。