页面回退历史记录

haobowd 发布于2019-08-26 11:35 / 507人阅读

摘要：应用场景页面跳到页面，再由页面回到页面期望页面通过一些筛选条件，得到列表，点击列表跳转到页面，页面返回到页面后，希望恢复到离开页面时的状态方法首次进入页面是什么状态，再次进入页面还是什么状态，不做任何处理优点简单，开发快缺点不能得到预期效果

应用场景

a页面跳到b页面，再由b页面回到a页面
期望：a页面通过一些筛选条件，得到列表，点击列表跳转到b页面，b页面返回到a页面后，希望恢复到离开a页面时的状态

方法

首次进入a页面是什么状态，再次进入a页面还是什么状态，不做任何处理
优点：简单，开发快
缺点：不能得到预期效果

将a页面的列表数据直接保存在内存中，直接渲染
优点：简单，开发快
缺点：

   只适合单页面开发
   浏览器刷新后，数据不存在
   a页面的数据还是之前的状态，不能及时更新

将a页面的搜索条件存储出来，进入页面后，重新搜索
a.将搜索条件存在url里面（最稳定）

   优点：可以获取到最新的数据，刷新浏览器数据还存在
   缺点：
       url长度限制（一般不会超过）

       游览器    最大长度（字符数）
       Internet Explorer    2083
       Firefox    65,536
       chrome    8182
       Safari    80,000

       开发难度增加，每一步都要去操作url，有洁癖的人看着不爽

b.将搜索条件存在内存中

   优点：开发比上者快，可以获取到最新的数据
   缺点：
       只适合单页面开发
       浏览器刷新后，数据不存在

疑问解答

问：为什么上面的保存都是保存在内存中，而不是保存在本地，保存在本地就可以解决刷新浏览器数据不在的问题
答：localStorage永久保存是优势也是劣势，不容易更新到最新的数据，不知道什么时候去删除和刷新数据，容易错乱

注意点

选择上面的哪一个方式，根据实际需求为准

目前我们的开发都是采用的单页面，浏览器刷新后，数据不存在，也可以接受，个人建议当前项目可以采用3b

混合云私有云记录历史历史记录天气历史记录网站历史记录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107175.html

PJAX是什么鬼【转载】

摘要：实际的效果见没有勾选的时候，点击链接是跳转的。为了支持，一个是在加载的时候判断浏览器是否支持另一个是当发现请求一段时间没有回复的时候可以设置参数，直接做页面跳转。背景目前看到的很多的pc端页面点击页面某块链接的时候，原本应该是页面的某个部分更新的，但是却整个页面刷新，整个页面都闪了一下。特别是看某些图集的页面，一个页面本来就几十张图看，看完眼睛都闪瞎了。用ajax加载数据可以解决这...

jindong 2019-08-20 13:58 评论0 收藏0
原生 js 实现一个前端路由 router

摘要：实现原理现在前端的路由实现一般有两种，一种是路由，另外一种是路由。现在的前端主流框架的路由实现方式都会采用路由，本项目采用的也是。当值发生改变的时候，我们可以通过事件监听到，从而在回调函数里面触发某些方法。效果图： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 项目地址：https...

gggggggbong 2019-08-26 13:30 评论0 收藏0
大话 SPA router

摘要：而单页应用只提供一个文件，在页面初始化的时候加载等等，然后通过去动态更新视图，从而实现交互，这避免了页面的刷新，跳转等等。这个方法是用来更换历史记录的。获取当前历史栈栈顶数据。比如说在这里面可以通过路径的不同，然后去渲染不同的页面。好吧，俺承认好像要当一把标题党了，这篇文章目的是记录一下对于 spa 的核心 —— 路由的学习，并没有什么超人类的东西，好了，我们开始吧。 SPA 是个啥...

wayneli 2019-08-22 14:50 评论0 收藏0
HTML5 history API，创造更好的浏览体验

摘要：而唯一不引发刷新的参数并不会发送到服务器，因此服务器无法获得状态。目前建议设置为空字符串。此外请注意，及本身调用时是不触发事件的。我认为，按照渐进增强的思路，这样就是最好的了，也就是只使用较少的代码优化高级浏览器的使用体验。 HTML5 history API有什么用呢？从Ajax翻页的问题说起请想象你正在看一个视频下面的评论，在翻到十几页的时候，你发现一个写得稍长，但非常有趣的评...

zgbgx 2019-08-21 10:23 评论0 收藏0