SYNCERのロゴ
アイキャッチ画像

History.state - データ

stateは、Historyのプロパティです。現在の履歴エントリーに紐付けられているデータを返します。データはpushState()replaceState()の第1引数で紐付けられます。

概要

名前
state
所属
History
IDL
readonly attribute any state;
仕様書
https://html.spec.whatwg.org/multipage/history.html#dom-history-state

説明

履歴エントリーに紐付けられているデータを返します。データが存在しない場合、nullを返します。

読み取り専用のため、値を新しく代入することはできません。プロパティの値を設定するには、pushState()replaceState()を利用して下さい。

デモ

History.stateのデモです。このデモは新しいウィンドウで開いた方が分かりやすいです。最初にpushState()を実行して下さい。このメソッドで新しく履歴エントリーを追加する時、第1引数でstateに"hoge"という文字列を設定します。そうしたら、「戻る」「進む」でその履歴エントリーに戻ってきてみて下さい。stateの値が保持されているのを確認できます。

<!DOCTYPE html>
<html>
<head>
<title>History.stateのデモ</title>
<style>
body { word-break: break-all ; }

div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<p><a href="./demo.html" target="_blank">デモを新しいウィンドウで開く</a></p>
<hr>
<p id="location"></p>
<hr>
<p id="state"></p>
<hr>
<p><button id="pushState">追加 [pushState()]</button></p>
<hr>
<div id="result"></div>
<script>
var locationElement = document.getElementById( "location" ) ;
var stateElement = document.getElementById( "state" ) ;
var resultElement = document.getElementById( "result" ) ;

function getHistoryInfo () {
	console.log( history ) ;

	locationElement.textContent = location.href ;
	stateElement.textContent = history.state ;

	resultElement.textContent = "" ;
	resultElement.textContent += "length: " + history.length + "\n" ;
}

onpopstate = getHistoryInfo ;
getHistoryInfo() ;

document.getElementById( "pushState" ).onclick = function () {
	history.pushState( "hoge", "新しく追加された履歴エントリー", "./new.html" ) ;
	getHistoryInfo() ;
} ;
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
19+ 6.0+ 10+ 11.6+ 6.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月13日 (金)
コンテンツを公開しました。