msakamoto-sf/history_api_ex1.html

## history_api_ex1.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML5 history API exercise</title>
</head>
<script>
/*
HTML5 history API exercise 1.

reference:
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history
http://breaktimes.hatenablog.com/entry/history-api
http://myakura.github.io/dih5ja/history.html
http://uhyohyo.net/javascript/12_3.html
http://nacika.com/entry/2013/01/18/003325/
http://www.webcyou.com/?p=4329
*/
function updateView(newState) {
  document.getElementById("k1").innerHTML = newState.k1;
  document.getElementById("k2").innerHTML = newState.k2;
}
function onPopState(event) {
  if(event.state) {
    console.log(event.state);
    updateView(event.state);
  } else {
    console.log("state = empty");
  }
}
function pushState1() {
  var newState = {k1:100, k2:"abc"};
  history.pushState(newState, null, "#state-1")
  updateView(newState);
}
function pushState2() {
  var newState = {k1:200, k2:"def"};
  history.pushState(newState, null, "#state-2")
  updateView(newState);
}
window.addEventListener("popstate", onPopState);
function onLoad() {
  var initState = {k1:0, k2:"initialized"};
  history.replaceState(initState, null);
  updateView(initState);
}
</script>
<body onload="onLoad();">
<input type="button" value="pushState1()" onclick="pushState1();">
<input type="button" value="pushState2()" onclick="pushState2();">
<hr>
<input type="button" value="history.back()" onclick="history.back();">
<input type="button" value="history.forward()" onclick="history.forward();">
<hr>
<div id="k1"></div>
<div id="k2"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>HTML5 history API exercise</title>
	</head>
	<script>
	/*
	HTML5 history API exercise 1.

	reference:
	https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history
	http://breaktimes.hatenablog.com/entry/history-api
	http://myakura.github.io/dih5ja/history.html
	http://uhyohyo.net/javascript/12_3.html
	http://nacika.com/entry/2013/01/18/003325/
	http://www.webcyou.com/?p=4329
	*/
	function updateView(newState) {
	document.getElementById("k1").innerHTML = newState.k1;
	document.getElementById("k2").innerHTML = newState.k2;
	}
	function onPopState(event) {
	if(event.state) {
	console.log(event.state);
	updateView(event.state);
	} else {
	console.log("state = empty");
	}
	}
	function pushState1() {
	var newState = {k1:100, k2:"abc"};
	history.pushState(newState, null, "#state-1")
	updateView(newState);
	}
	function pushState2() {
	var newState = {k1:200, k2:"def"};
	history.pushState(newState, null, "#state-2")
	updateView(newState);
	}
	window.addEventListener("popstate", onPopState);
	function onLoad() {
	var initState = {k1:0, k2:"initialized"};
	history.replaceState(initState, null);
	updateView(initState);
	}
	</script>
	<body onload="onLoad();">
	<input type="button" value="pushState1()" onclick="pushState1();">
	<input type="button" value="pushState2()" onclick="pushState2();">
	<hr>
	<input type="button" value="history.back()" onclick="history.back();">
	<input type="button" value="history.forward()" onclick="history.forward();">
	<hr>
	<div id="k1"></div>
	<div id="k2"></div>
	</body>
	</html>