关于浏览器回退默认行为的研究 回退保存页面状态

Posted 2021-01-03

缘起：最近在研究 移动端的页面研发工作，由于之前从来没有专业开发过移动端页面，所以在开发过程中，可以说是处处有精彩，处处有收获.最让我意外的是，浏览器页面回退问题 就是个头疼的问题.

需求：我们的需求是，在a页面，打开b页面，之后b再回退到a页面，a页面仍然能保持 a刚刚打开b页面时的状态.

分析过程：最开始接到这个需求，觉得这也不是啥大需求啊，浏览器默认行为，就能支持吧，经过测试后，发现有的浏览器支持，有的不支持。有的页面支持，有的页面不支持，可以说，比较懵，最后决定，先分析一些基本的浏览器知识，之后再思考.

分析结果:
经过了长时间的分析后，对浏览器行为有了一个较深的了解，经验如下:

一.浏览器会记住页面滚动条位置的行为:
1.a页面为静态资源页面，当a打开b页面时，页面会记录滚动条位置.
2.a页面使用ajax请求数据，切ajax是同步请求，且页面其他ajax请求都遵循此规则时生效.
只要记住这两个规则，在开发时就会有一个清晰的思路.

二.解决方案总结:
1.可以使用单页应用的模式，进行开发，原理是 hash 路由. #
2.可以借用localstorage缓存，在a页面打开b时，记录页面元素位置，及页面元素，之后在回退时，直接从缓存中读数据.
3.可以借助 浏览器记住页面状态行为来解决.直接输出静态页面，优点时，无需控制行为，无需写多余的业务，去控制页面的行为.

我采用的方式是，页面借助 c# mvc razor技术，静态输出，之后用点击下一页，因为ajax不太好控制，翻页.分析了许多大厂的页面，也没太研究透，只是看他们都是静态页面输出。如果大家有更好的方式，可以评论哦，共同进步，互相学习.