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

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

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

页面分为两个，一个是列表页：
一个是内容页：

先说列表页：

你可以观察到我在列表页展开时是带有锚的，当列表页加载时，若 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如何实现在回到历史页面时完全保留之前离开这个页面时的状态”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。