前言
在我们日常的网页浏览中，我们非常喜欢做一个操作：点击浏览器的前进后退
在Ajax技术出现后，有些时候前进后退就会给开发者带来困扰，甚至一些开发者试图去干掉History
随着Html5的发展，移动端的兴旺，单页应用出现了，于是History的处理被不得不提上议程了！
要知道，这一直是一项让人不愿意去碰的巨坑，但是单页应用却不得不去解决
首先History的处理逻辑看似简单，实则负责，稍不注意就会出问题，我们这里来探讨下单页中History的处理规则
基础知识
javascript中History的历史对象包含用户已经浏览的URL信息，这就是我们传说中的历史记录
我们一般会用到forward/back两个方法与一个length接口，或者使用go具体到哪一层
后面一点，浏览器厂商发现History对象确实被管的过紧，于是又释放了两个关键接口，pushState以及replaceState，用于操作History对象
于是我们今天的一个重点便是这里的pushState以及replaceState，这两位同学可以向History中压入对象，并且在浏览器前进后退时会被触发
pushState
pushState会往History中写入一个对象，他造成的结果便是
① History length +1
② url 改变
③ 该索引History对应有一个State对象
这个时候若是点击浏览器的后退，便会触发popstate事件，将刚刚的存入数据对象读出，这里举一个简单例子
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<style type="text/css">
div { margin: 10px; }
.msgBtn { margin: 10px; padding: 10px; border: 1px solid black; }
</style>
<script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
</head>
<body>
<div id="msg">
消息框</div>
<br><br>
<span class="msgBtn">去第一页</span> <span class="msgBtn">去第二页</span> <span class="msgBtn">去第三页</span>
<script src="../../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var _loc = location.href;
function showMsg(el, msg) {
el.html(msg);
}
window.addEventListener('popstate', function (e) {
if (!e.state) return;
showMsg($('#msg'), e.state);
});
$('.msgBtn').click(function (e) {
var msg = $(e.target).html();
showMsg($('#msg'), msg);
history.pushState(msg, msg, _loc + '/' + msg);
});
</script>
<style></style>
<script></script>
<!-- Generated by RunJS (Wed May 07 18:05:27 CST 2014) 1ms --></body></html>
http://sandbox.runjs.cn/show/cspv3812
我们点击第一页时，往History中压入了数据，并且往里面写入了State对象（当前为msg），然后我们在浏览器后退时便会触发popstate事件
这个时候我们的URL已经发生改变，我们在事件点触发时便能进行操作了，我们这里的操作是改变msg的信息
所以这里我们得到的结果是
① pushState 会改变History
② 每次使用时候会为该索引的State加入我们自定义数据
③ 每次History的变化（forward、back、go）皆会导致popstate的触发，并且将对应索引的State搞出来
④ 每次我们会根据State的信息还原当前的view，于是用户点击后退便有了与浏览器后退前进一致的感受
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索对象
， 浏览器
， msg
， 一个
， pushstate
， 单页应用
， history
history对象
纯黑的噩梦、铃铛噩梦、柯南纯黑的噩梦完整版、阴阳师铃铛噩梦、名侦探柯南纯黑的噩梦，以便于您获取更多的相关知识。