HTML5 history solves the problem that ajax cannot be added to history

I recently took the time to study html5 history and wrote a small test. Since it is only displayed on the front end, I replaced the processing of ajax with simple JS events, and copied the code directly, which can be viewed on the static page.

1. Basic operation

// browser back

window.history.back();
window.history.go(-1);

// browser forward

window.history.forward();
window.history.go(1);

// browser refresh

window.history.go(0);

Second, the history method

1、history.pushState()

The pushState(state, title, url) method has three parameters;

state (the first parameter): put the data that needs to be saved in the history, and encapsulate it in the form of an object;

title (the second parameter): can be ignored at present, basically not needed;

url (third parameter): add the suffix to the original url address, you can separate the original url with a question mark, and the question mark and the following parameters are the values here

2、history.replaceState()

Replace the history of the current page, the usage is the same as pushState;

Note: the third value is not required if only replacing the data

3 、popstate

Whenever the active history item changes (pushState or replaceState), the popstate event will be passed to the window object, and then the browser will read the changed value when operating;

Note: Remember to write data processing in popstate , so that the browser will display the page it saw before;

4、window.onpopstate()

When the browser operates (forward/backward), the window.onpopstate() event will be triggered to retrieve data from the window's history;

3. Simple example

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			position: fixed;
			top: 100px;
			font-size: 22px;
		}
	</style>
	<body>
		<div id="text">这是第0个页面</div>
		<button onclick="change(this)" page="0">点击变化</button>
		<button onclick="change(this)" page="1">点击变化</button>
		<button onclick="change(this)" page="2">点击变化</button>
		<button onclick="change(this)" page="3">点击变化</button>
		<script>
			var obj={};	
			function url_deal(){
//				获取url,模拟后台解码传递数据
				var url = window.location.href,
					_page = url.split("?")[1].split("&");
					_page.map(function(str){
						var arr = str.split("=");
						obj[arr[0]] = arr[1]	
					})
				return obj	
			}
			url_deal();
			var value =	[
					"这是第0个页面",
					"这是第1个页面",
					"这是第2个页面",
					"这是第3个页面",					
				];
//				数据处理 
				document.getElementById("text").innerHTML = value[obj.page||0];
//				替换当前页面的历史记录并存入数据
				history.replaceState({text:document.getElementById("text").innerHTML}, '');
//				console.log(obj)
		</script>
		<script>	
			function change(_self){
//				_self.getAttribute("page") 为button内 page属性的值
				url_deal();//重新获取url并解码

//				备注：这里可以换为请求ajax获取数据 
				var text1 = "这是第"+_self.getAttribute("page")+"个页面";
				document.getElementById("text").innerHTML = text1;
				
				
//				history.pushState是给浏览器添加历史记录，可以把需要保存的值放入history.state(第一个参数)里面(数据放入历史记录)
				if(obj.page && obj.page == _self.getAttribute("page")){
//					判断如果当前页面与要请求的页面是同一个则调用浏览器刷新
					window.location.reload();
					return;
				}
				else if(!obj.page && "0" == _self.getAttribute("page")){
					window.location.reload();
					return;
				}
				
//				获取的数据放入pushState后的第一个参数内  这里的例子为：{text:text1}				
				history.pushState({text:text1}, '', '?page='+_self.getAttribute("page"));
				obj = {}//清空内容,便于下次的填入数据
				
			}
//			 popstate，当浏览器变化(前进、后退、刷新)时运行
			window.addEventListener("popstate", function() {
//				history.state指向上面history.pushState的第一个值
//				前进/后退/刷新的时候，可以引入这里的数据
			    var result = history.state;
//              这里要对存入的数据进行处理,在需要的位置填入相应的数据，才会正常展示保存时的界面
				document.getElementById("text").innerHTML = result.text;
			});
		</script>
	</body>
</html>