锚接口(下)——html5的history api
概述
虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法，但是很多老式的浏览器并不支持它，所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange方法。
另一方面，html5的history api在实际使用的时候会和之前的hashchange方法的用法有稍微的不同。
说明
- 主要使用history.pushState改变url，它的调用格式是
history.pushState(data, title, path);，其中data是一个自己定义的数据对象，title是标题，现在大部分浏览器还不支持，path是路径。 - 用这个方法改变url的时候，页面并不刷新。
- 用这个方法改变url的时候，并不会触发onpopstate事件，只有在使用history.go或者history.back等方法的时候才会触发onpopstate事件，比如说浏览器按倒退键。(这一点和hashchange方法不同)
- 触发onpopstate事件的时候可以用event.state获得data这个对象。
解决方案
SPA怎么路由
具体和hashchange方法类似，唯一不同的地方是，在用history.pushState改变url的时候，由于不会触发onpopstate事件，所以一些函数要放在history.pushState改变url之后处理(以前是直接由hashchange事件处理)。
复制url并在另一个页面打开
如果是用#符号的话，那么方法类似hashchange。
但是新的history api可以摒弃#字符，比如说react-router里面就是这么做的，具体怎么解决我还没有弄清楚。
例子
下面是我编写的一段测试代码供大家参考。直接复制并存为html文件，然后在服务器上打开即可。(因为history api需要一个域名，可以是locahost)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//hashchange事件，如果有hash值，则输出到oDiv。
function onPopstate(event) {
if(history.state) {
console.log(history.state.next);
}
if(history.state && history.state.next === 1){
$('#div1').hide();
$('#div2').show();
$('#div3').hide();
} else if(history.state && history.state.next === 2) {
$('#div1').hide();
$('#div2').hide();
$('#div3').show();
} else {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
}
}
//页面加载
window.onload=function (){
//加载时触发一次hashchange事件
$(window)
.bind( 'popstate', onPopstate )
.trigger( 'popstate' );
//点击事件，把数组装在hash里面
document.getElementById("input1").onclick=function(){
history.pushState({next: 1}, null, 'next1.html');
$('#div1').hide();
$('#div2').show();
$('#div3').hide();
};
document.getElementById("input2").onclick=function(){
history.pushState({next: 2}, null, 'next2.html');
$('#div1').hide();
$('#div2').hide();
$('#div3').show();
};
document.getElementById("input3").onclick=function(){
history.pushState('', null, 'index.html');
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
};
}
</script>
</head>
<body>
主页=模块1，模块2页=模块2，模块3页=模块3
<input type="button" value="去模块2页" id="input1" />
<input type="button" value="去模块3页" id="input2" />
<input type="button" value="去主页" id="input3" />
<div id="div1">模块111111111111111111</div>
<div id="div2">模块222222222222222222</div>
<div id="div3">模块333333333333333333</div>
</body>
</html>
其它
- 单页面路由实际上和我的demo不一样，不太运用history.pushState里面的data参数，而是直接分析url做正则匹配，不过这个data参数在别的地方有很大用处。
- 一般的路由和我的demo里面不一样，不是用按钮而是用a链接，那个时候直接在click的时候阻止默认跳转即可。
- history.pushState里面的data参数储存在sessionStorage里面。
