1. H5中将history的内容进行了一个增加
H5中新增加的内容解决了网络部分的问题，其解决的重要问题是：无刷新历史记录切换。
1.1 history.pushState()方法
history.pushState(stateObj,’page2’,’bar.html’) 添加一条历史记录。
参数：stateObj是传递的值，它是一个对象；page2是新的历史记录的标题，目前还没有什么用（相当于你写了它也不会去帮你读取它的）;bar.html是添加历史记录是什么（该参数在这里也可以不用写成bar.html网页，可以写成一个参数）。
注意：当我们通过pushState的方法来增加一条新的历史记录，它并不会刷新网页的。它只是添加了一条历史记录，并不会把当前这一条历史记录给刷新的。简单的来说就是：它并不会重新渲染，它还是之前的那一个页面。
下面给大家举一个例子：
index.html和demo.html是同级文件，在index.html中写入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<button class="btn">click</button>
<script>
let oBtn = document.getElementsByClassName("btn")[0];
oBtn.onclick = function(){
history.pushState({name:"daipi173"},"","demo.html");
};
</script>
</body>
</html>
|
在demo.html中写入如下代码:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
我是demo
</body>
</html>
|
当我在localhost下面打开网页之后，并点击click按钮，此时我们会发现url变成了demo.html，但是页面并不会刷新，页面还是有一个click的button按钮的页面，而不是我是demo的页面，如下图所示：
1.2 history.replaceState()方法
history.replaceState(stateObj,’page3’,’bar.html’)替换当前历史记录。
参数：stateObj是传递的值，它是一个对象；page2是新的历史记录的标题，目前还没有什么用（相当于你写了它也不会去帮你读取它的）;bar.html是替换的 历史记录是什么。
比如：当前只有一条历史记录，当我们把这条历史记录进行替换之后，当前是不会产生前进或者后退按钮的，我们还是举一个例子来看看。
index.html和demo.html是同级文件，在index.html中写入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<button class="btn">click</button>
<script>
let oBtn = document.getElementsByClassName("btn")[0];
oBtn.onclick = function(){
history.replaceState({name:"daipi173"},"","demo.html");
};
</script>
</body>
</html>
|
demo.html的代码和上一个pushState()方法中写的代码是一样的。此时你会看到当你点击click按钮替换成了demo.html之后，再点击向左翻的按钮它并没有返回index.html，如下图所示:
1.3 onpopstate事件
window.onpupstate历史记录发生变化时触发。但是需要注意的是：通过pushState或者replaceState方法是不会触发该事件的。只有点击前进或者后退，这样来回翻的时候，历史记录发生变化才会触发该事件。
来给大家举一个例子：
index.html和demo.html是同级文件，在index.html中写入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<button class="btn">click</button>
<script>
let oBtn = document.getElementsByClassName("btn")[0];
oBtn.onclick = function(){
history.replaceState({name:"daipi173"},"","demo.html");
};
window.onpopstate = function(){
console.log(1111);
};
</script>
</body>
</html>
|
demo.html的代码和上一个pushState()方法中写的代码是一样的。此时当你点击click按钮之后，你会发现index.html被替换成demo.html，但是控制台并没有打印出1111值来，就验证了上面的说法了，如下图所示：
如果你想验证如何打印出来1111的值，可以将上面replaceState方法先改为pushState方法，其原因是先给浏览器添加一条浏览记录，此时当你点击click按钮的时候，会发现控制台还是不会打印1111值的，但是当你点击回退或者前进按钮的时候，会发现控制台打印出了1111的值，具体的内容我就不放代码了，只需要将前面的代码进行一个修改即可实现。
1.4 state属性
还记得上面说的pushState和replaceState方法中第一个参数值吗，如果想要打印出传递过来的值，那么就需要使用state属性，下面给大家举一个例子：
index.html和demo.html是同级文件，在index.html中写入如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<button class="btn">click</button>
<script>
let oBtn = document.getElementsByClassName("btn")[0];
oBtn.onclick = function(){
history.pushState({name:"daipi173"},"","demo.html");
};
window.onpopstate = function(e){
console.log(e.state);
};
</script>
</body>
</html>
|
demo.html的代码和上一个pushState()方法中写的代码是一样的。
此时当前打开的页面是index.html页面，当我点击click按钮的时候新添加了一条demo.html（当前页面为demo.html），此时控制台不会打印出内容；当我点击浏览器后退按钮往回翻时（当前页面为index.html），控制台打印出null;当我点击浏览器前进按钮往前翻的时候（当前页面为demo.html），控制台打印出{name:”daipi173”}。在这里我就不把实现结果的图片放上去了，有兴趣的小伙伴可以亲自动手试一试，看看是不是和自己想象的是一样的。
由于history在实际开发中用的比较少，大家记住history新增加的内容最主要的就是解决了无刷新历史记录切换。
