pushStateメソッドの挙動について

以下のHTMLとJavaScriptを書きました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn">
    <span id="result">ー</span>回クリックされました

    <script>
    var count = 0;
    var result = document.getElementById('result');
    document.getElementById('btn').addEventListener('click',function(){
        result.textContent = ++count;
        history.pushState(count,null,'/js/chap07/count/' + count);
    });

    window.addEventListener('popstate',function(e){
        count = e.state;
        result.textContent = count;
    });
    </script>
</body>
</html>

テキストによれば、戻るボタンを押すと、カウンターの更新が前に戻るようです。
こちらの質問を参考に、いったんグーグルのページにアクセスしてから、ローカルに作成したHTMLファイルにアクセスし「戻る」ボタンが押せるようにして、実際に押したところ、単純にグーグルのページに戻ってしまいました。
これは何が原因なのでしょうか。

行動規範の内容に同意します

回答2件

これは何が原因なのでしょうか。

ページ遷移を発生したときにURLが変わりますが、ブラウザはそのURLを履歴として保持します。原因は、その履歴に合わせて表示内容を変えたことにあります。

ご質問のコードではブラウザに実装されている History API を使っています。

が、参考になるかと思います。

テキストによれば

その表現では具体性に欠くため、回答者には通じないです。

ネット上のどこかに転がっている情報
名称も明かされない書籍
誰かに渡された雑記

削除箇所
（質問文中の誤リンクを指摘。訂正確認した為）

メソッドやプロパティは「MDN methodName」や「MDN propertyName」の2語で検索すると、仰るところの「テキスト」には無い詳細を知ることができるかもしれません。

投稿2019/12/22 05:03

編集2019/12/25 02:17

AkitoshiManabe

総合スコア5434

theplace

2019/12/24 21:52

ありがとうございます。リンク先（＝「こちらの質問」）が間違っていたので、修正しました。紹介していただいたMDNのページを拝見しました。「history.pushStateメソッドを使えば、ブラウザの履歴にクリックイベント等の履歴を意図的に追加することができる」と解釈しています（テキスト（JavaScript本格入門）にそのようなことが記載されていたため、そう思いました）。ブラウザの「戻る」ボタンを押した時に、カウンターの数値を1つ前に戻すだけの状態に戻すということは、history.pushStateメソッドにより可能なのでしょうか。

AkitoshiManabe

2019/12/25 02:12

「javascript history.pushState」の2語て検索すると、ブラウザに実装されたばかりの 2015 年のブログ記事がヒットします。履歴の操作に関しては、それ以前からある go(), back(), foward() の挙動確認も行うと疑問を解決できるかもしれません。

theplace

2019/12/26 21:29

go(), back(), foward() の挙動は以下のようなサイトを参考に確認しました。 http://www.htmq.com/js/history_back.shtml ブラウザの戻るボタンを押した時に、上記3つのような挙動ではなく、単にカウンターの数値のみを戻すようにすることをテキストでは実現されているようですが、実際にはそうしたことはhistory.pushStateではできないのでしょうか？

AkitoshiManabe

2019/12/26 22:15

上記３つは「ページ遷移を伴う用途」それ以外の追加されたAPIは「ページ遷移しないSPA用」です。この違いを踏まえて、参考になりそうなのが Qiita にあります。 https://qiita.com/PianoScoreJP/items/fa66f357419fece0e531

行動規範の内容に同意します