理解使用URL保存状态实现页面行为驱动
要做出像开关菜单或直接转去某地那样酷炫的网页效果？那你得学会用URL的”记事本”功能，真的超实用！保证无论你怎么翻页或分享链接，页面都不会乱套。接下来，我就教你怎么用这个”记事本”驱动页面行为，还有它在前端开发中有哪些妙用。
JS检测URL上的锚并展开对应折叠列表
有了锚点，网站加载完后，我们就能知道之前点了哪个链接。下次再看这页时，就能直接看到上回选中的那部分内容，再也不怕忘了自己要找什么~如果没有锚点，那就先打开第一眼看见的那个折叠部分，然后保持屏幕滑动，这样即使页面换了，也不影响我们接着往下读
点击折叠列表标题实现URL锚变化与滚动定位
当你点开折叠菜单的时候，要记得咱们这儿还有个好东西——History.pushState()~用它的话，你就可以给网址加上书签那样的“锚”，而且相关的折叠菜单也会跟着出现。最赞的是，还能直接跳转到对应的那部分内容顶部这样不仅方便记，关键是找起信息来超快，整个网页都变得更好玩！
根据入口链接判断历史记录恢复或跳转
想知道刚从哪儿过来？用document.referrer就行，比如打开那个能折起来的菜单。真的是那样的话，来个history.back()就能回去了，你之前设过的锚点还在，所以折叠菜单又出来了，再把页面拉上去不就好了。要是你自己输网址进来的，那就简单粗暴地用location.href=url直接跳到上一级去。
利用URL保存状态实现事件驱动
是不是只有登陆了才看得见网页呀？不怕，我们来用URL保存状态！简单来说，就是在每个页面的网址里面包含这个页面的具体信息。你想怎么看，怎么分享都行，页面的状态永远不会丢失！更妙的是，如果某个地方变了，网址也会自动更新，保证页面和网址始终保持一致，就像咱们日常生活中那样。
AJAX局部刷新模式提升性能
比起全屏刷新的好处，AJAX局部刷新的优点就是快准狠，省事很多。像读取数据、分析处理、执行命令这些事儿，全都让它搞定！所以在浏览网页的时候，速度感觉嗖嗖的飞快！还有jQuery里的load()方法，就像个快捷通道一样，帮你快速完成AJAXGet请求和局部刷新。真的是超级好用
利用HTML5HistoryAPI记录历史信息
想要浏览器能灵活地前进和后退并记住历史记录？那就得用上HTML5的HistoryAPI了。它能借助history.pushState()轻松存上下页的历史记录。要是你在IE8/9这些浏览器上遇到了问题也没关系，window.onhashchange就能搞定。对于IE6/7这种古董级别的浏览器，我们还可以用setTimeout()模拟hashchange事件或者把iframe伪装成带缓存的Ajax。这样一来，浏览器处理前后页就像玩儿似的，用户体验自然也就提升！
选择合适存储方式保持状态
哎呦，不只用sessionStorage，还有hash、localStorage、cookie等等，都是不错的选择！但是，哪种最好用就看你自己的需求，记得要保护好数据安全！
评论0