34
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

History APIで履歴をいじる

Posted at

History APIってなんなん

History APIは以前からありjavascriptから「戻る」「進む」などの操作を提供していました。
HTML5になって履歴情報を操作(追加/変更/移動監視)することが可能となりました。

履歴の移動

前のページへ(back)

前のページに移動するには、以下の様にします。

window.history.back();

次のページへ(forward)

次のページに移動するには、以下の様にします。

window.history.forward();

指定ページに移動(go)

指定ページへの移動は、以下の様にします。
以下の例では、1つ次のページへ進みます。(window.history.forwad()と同じ動きになります。)

動きは引数にセットする値により変わります。
+の場合、現在のページより先へ
-の場合、現在のページより前へ

window.history.go(1)

履歴情報の操作

履歴情報では以下の情報を扱います。

  • state
    任意のオブジェクト
  • title
    現在は使用されていない値
  • url
    履歴のURL

履歴情報の追加(pushState)

履歴を追加するには、以下の様にします。
追加したstateは、popStateイベントの第1引数のオブジェクトにstateプロパティとして格納されます。

window.history.pushState({name : 't-okushima'}, null, '/name')

履歴情報の置き換え(replaceState)

履歴を置き換えるには、以下の様にします。

window.history.replaceState({name : 'aaaa'}, null, '/name')

履歴情報の監視(popState)

ブラウザの「戻る」「進む」または、同様の操作が行われた際に呼び出されるイベントとなります。
以下の様にします。

window.addEventListener('popstate', function(event) {
    // 任意の処理
    var state = event.state;
    alert(state.name):
});

現履歴情報の取得(state)

現在の履歴情報をpopState以外から扱いたい場合に利用できます。
以下の様にします。

window.history.state

サンプル

<!DOCTYPE html>
<html>
    <head>
        <title>History API Sample</title>
    </head>
    <body>
        <label for='name'>Name</label>
        <input type='text' id='name' value='' />
        <input type='button' id='pushButton' value='pushState' />
        <hr />
        <input type='button' id='replaceButton' value='replaceState' />
        <script>
            document.getElementById('pushButton').addEventListener('click', function() {
                var name = document.getElementById('name').value;
                window.history.pushState({name : name}, null, './history-api.html');
            });

            document.getElementById('replaceButton').addEventListener('click', function() {
                var name = document.getElementById('name').value;
                window.history.replaceState({name : name}, null, './history-api.html');
            });

            window.addEventListener('popstate', function(e) {
                var state = e.state;
                if (state) {
                    document.getElementById('name').value = state.name;
                    alert(state.name);
                } else {
                    document.getElementById('name').value = '';
                }
            });
        </script>
    </body>
</html>
34
30
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?