阿坝州网站建设公司

html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态

这篇文章将为大家详细讲解有关html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司从2013年创立，先为连城等服务建站，连城等地企业，进行企业商务咨询服务。为连城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

比如在页面A中点开了一个折叠列表（用jquery做的），并且向下拖动了一点滚动条，然后通过列表中的某个按钮跳转到了页面B，B页面中有一个goback按钮，点击一下就能跳回页面A，跳回页面A时，滚动条保持在之前离开时的状态，并且之前打开的那个折叠列表也要是保持打开的。有哪些html5 API或jquery API可以实现吗？
ps：我试了jquery 中的history.back()，可以实现滚动条位置不变，但是折叠列表变成了初始状态（也就是说和刷新了页面一样），具体如下：


页面分为两个，一个是列表页：
html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态一个是内容页：
html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态
先说列表页：

你可以观察到我在列表页展开时是带有锚的，当列表页加载时，若 JS 检测到 URL 上有锚，展开对应的折叠列表；若 URL 上没有锚的时候，就展开第一个，并且滚动条不滚动。

当点击折叠列表的 panel-heading 时，使用 history.pushState(null, null, url) ，改变 URL 上的锚，并展开该折叠列表以及滚动到该折叠列表的顶部。
然后说一下内容页里的「返回」：
首先需要判断一下入口链接是什么，使用 document.referrer 即可。
然后可能出现以下两种情况：
1、用户是从你的折叠列表进入该内容页的，那么你可以使用 history.back()，这时之前使用 history.pushState() 改变的锚还保留，而且会自动展开并滚动到这个锚所对应的折叠列表。
2、用户是直接在地址栏输入链接进入的，此时你可以直接用 location.href = url 将它跳转到它的上一级链接中。
具体的效果你可以来我们网站看：计蒜客 - 让学习更有味，要进入内容页需要登录才行~ 你这种需求比较适合使用 URL 来保存状态，然后使用 URL 来进行事件驱动。这样的好处在于将各个页面的状态保存在各自的 URL 里，不管是使用浏览器的前进后退还是将当前链接分享给他人，都不会丢失页面状态。
驱动过程分为以下几步：
修改 URL (trigger) -> 解析 URL -> 调用对应的回调 (listener)
其中：

  • 为了不引发界面刷新，修改 URL 时需要使用 URL hash 或者 history.pushState()。

  • 注册 listener、解析 URL 和调用 listener 可以交给前端路由。（自己年轻的时候也造过一个前端路由的轮子 PRouter.js。（逃

当然如果不希望把一些状态保存在 URL 里，那也可以保存在 localStorage 里。但不变的是一定要用状态来驱动页面行为，而不是先执行页面行为然后再去保存状态。 简单的状态可以放在hash里
再复杂点的可以放在localstorage或者sessionstorage里
要是再复杂的话，建议还是层叠多个视图吧，这样无论多复杂的状态都会保存 题主如果用 传统的整页刷新模式，那必然需要 hash 标记 + jQuery 插件响应的“打配合”方案。但这实在没必要，子栏目页面之间切换而产生的反复加载、解析、执行、渲染，会非常浪费性能……
所以，以“局部刷新”著名的 AJAX 模式，自然是实现“局部驻留”的极佳方案（IE 6 中的 Outlook Web 版是最早的实现）～
而且，jQuery 的 load() 实例方法已经把 AJAX Get 请求、jQuery empty()、jQuery html() 封装起来，分分钟实现 局部刷新～
以上是 用户浏览过程的“前进阶段”，而“后退阶段”就需要先在前进时留下历史记录，再在用户后退（浏览器后退功能 或 用户触发了前端工程师写的包含 history.back() 调用的代码）时恢复之前局部刷新过的 正文子页面，并把页面主框架中的 全局导航菜单 指向对应的条目。这种为 AJAX 记录历史信息的技术就是 HTML 5 History API（history.pushState() 是其最常用的 方法），IE 8/9 可以用 window.onhashchange 兼容，IE 6/7 就只能用 settimeout() 模拟 hashchange 事件 或用 iframe 的 window.history 来记录 window.parent 的 AJAX 历史～
上述兼容在 Github 上已有成熟的开源库，也有结合 AJAX、pushState 的成熟框架 —— PJAX～
（习惯 jQuery 风格 API 的人，推荐一下本人开发的 PJAX 模式框架 —— EasyWebApp，托管于 Git@OSC ——  http://git.oschina.net/Tech_Query/EasyWebApp ） 网页的结构天然是不应当返回的，只有前进。
返回这块被浏览器拿去了。
自定义一个链接，跳转到另外的页面上。那就给目标页面增加Hash之类的状态识别。 三个方法 1,hash 2,localstroge 3,cookie 之前用localstorage做过，把要保存的状态push到一个对象里，加载页面的时候判断对象，不过localstorage不能不能设定寿命，也就是说你无法在用户离开你的页面时清除，所以建议你试试sessionstorage， 跟session的用法一样，会在用户离开时清除。

关于“html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


网站标题：html5、jquery如何实现在回到历史页面时完全保留之前离开这个页面时的状态
本文URL：http://azwzsj.com/article/ghsoih.html

其他资讯