jQueryを残したまま、ページを戻りたい

Question

現在Webアプリを制作しています。
サイトの大まかな内容は完成しました。

皆さまにご教授いただきたい点は以下になります。

【解決したいこと】
・ページ遷移後、前のページのjQuery(≒javascript)を残したままページを戻りたい

以下で詳細をお伝えします。

【経緯・詳細】
弊Webアプリには「商品一覧」のページがあります。商品一覧ページにある商品をクリックすると、form(GETメソッド)が発動し、商品の詳細ページに遷移し、商品の詳細を表示します。

しかし、サイトで取り扱う商品数が多いため、商品一覧ページはjQueryを用いて最初の10件のみ表示しています。
ページ下部の「もっと見る」ボタンをクリックすると、10件ずつ商品を追加して表示する様になっています。

「もっと見る」をクリックして表示させた商品をクリックして、その商品の詳細ページに遷移した後、
ブラウザで「戻る」と、今まで押していた「もっと見る」のjQueryの効果が初期化(?)されて、また最初の10件のみしか表示されなくなってしまいます。

---

私が開発段階で確認していたiPhoneのSafariとChromeでは、このjQueryの効果が残ったままページを戻れるのですが、
デスクトップのMicrosoft EdgeやChrome、Android端末のChromeだと上記の問題の動作をします。

これをjQueryの効果を残したまま、ページを遷移(戻る)ことができたら、いちいち下部の商品まで「もっと見る」を押さないで済むので、ユーザーのとって負担が少ないと思いました。

諸先輩方、お手数おかけして申し訳ありませんが、
ご教授いただけると幸いです。
宜しくお願いします。

Answer 1

history.pushState()を使えば画面遷移しないままURLがブラウザの履歴に残せるので、お望みの仕様に使えると思います。

https://developer.mozilla.org/ja/docs/Web/API/History/pushState

Comments

[sunasuna123go]

お返事いただきありがとうございます！
聞いたことないメソッドなので、history.pushState()で調べてみたいと思います！

[sunasuna123go]

前回お返事頂いてから時間が経ってしまい、申し訳ありません。

あれから作業を再開するタイミングがあったのですが、history.pushState()の使い方は、
商品の詳細ページへの遷移にhistory.pushState()を用いて、
元の商品一覧のページのjQueryを残したままページ遷移する
という認識であっていますでしょうか。

お忙しいとは思いますが、お返事頂けると幸いです。
よろしくお願い致します。

[cerfweb]

「もっと見る」ボタンのクリックイベントに伴う動作にwindow.history.pushState(〇〇〇); を入れることで、ブラウザに履歴が残ります。（〇〇〇はサイトの仕様に沿った引数を入れてください。「もっと見る」ボタンをクリックした場合にURLに何らかのパラメータを追加するなどの工夫が必要です。）
それによって、ページ遷移した後でもブラウザの「戻る」で「もっと見る」ボタンをクリックした後の状態と同じ状態が表示されるという仕組みです。

[sunasuna123go]

お返事いただき、ありがとうございます！
すごい大雑把に解釈すると、
各「もっと見る」にフラグの様な機能を持たせて、ブラウザバックするときにそのフラグを参照するみたいなことでしょうか。

[cerfweb]

具体的に説明すると、例えば「もっと見る」ボタンのクラスを.moreBtnとし、1回押したら商品の合計表示数が20までとなるのでその時のURLにパラメータ?cnt=20或いは/20/のようなものを追加するとします。
その上で、
$('.moreBtn').on('click', function(){
// 10件データを追加するスクリプト、〇〇〇の部分に入れるURLパラメータの変数設定など...
window.history.pushState(〇〇〇);
});
とすれば、商品をいくつまで表示するかということが指定されたURLがブラウザの履歴に残ります。
「もっと見る」ボタンをクリックしても画面遷移はしませんが、ブラウザの履歴には商品表示件数の指定がURLで残る仕組みです。

Answer 2

まず、なぜ初期化されてしまうのかという問題ですが
原因はブラウザバックしたときにページが再読込される仕様のためです。
当然jQeryの処理も再度されることになります。
ではどうやって「もっと見る」をクリックした状態を保存するかですが...

• Cookieに保存
• サーバーの任意のファイル・データベースに保存

が考えつきますが、あまりスマートでは無いですね

リンク先を別タブで開かせる(target="_blank")
ようにするのが現実的かと思います。

Comments

[sunasuna123go]

ご回答いただき、ありがとうございます！
頂いたキーワードを元に追加調査したところ、「iPhoneはブラウザのキャッシュを読み込むため、jQueryが残ったままである」的な記述を見つけました。

ページをPHPで作成しているので、PHPでキャッシュを残す方法を一先ず調べようと思います！