[解決済み] リフレッシュせずにURLにパラメータを追加する

質問

この質問は何度もされていることだと思いますが、回答は私の問題を解決するのに十分な説明ではありませんでした。私はページのURL全体を変更したくありません。私はパラメータを追加したい &item=brand を追加したいのですが、ボタンをクリックすると更新されません。

使用方法 document.location.search += '&item=brand'; を使うと、ページが更新されます。

を使って window.location.hash = "&item=brand"; はリフレッシュせずにハッシュで追加します。 # を追加すると、パラメータの使用/効果がなくなります。私は、追加した後にハッシュを削除しようとしましたが、うまくいきませんでした。

この回答 や他の多くの人が、HTML5 History API の使用を提案しています。 history.pushState メソッドを使用すること、そして古いブラウザの場合はページの再読み込みを防ぐためにフラグメント識別子を設定することです。しかし、どのように？

URLがあると仮定して。 http://example.com/search.php?lang=en

どのようにすれば &item=brand を追加するには、HTML5 の pushState メソッドまたはフラグメント識別子を使用して、次のような出力になります。 http://example.com/search.php?lang=en&item=brand ページ更新なしで？

HTML5 の pushState を使用して、既存の/現在の URL にパラメータを追加する方法について、誰かが何らかの光を投げかけてくれることを願っています。あるいは、同じ目的のためにフラグメント識別子を設定する方法。良いチュートリアル、デモ、または少しの説明のあるコード片があれば最高です。

デモ をご覧ください。ご回答をよろしくお願いします。

どのように解決するのですか？

あなたは pushState または 置換状態 メソッド、すなわち

window.history.pushState("object or string", "Title", "new url");

または

window.history.replaceState(null, null, "?arg=123");

引数付きの例です。

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);