ブラウザバックした時にリストを「もっと見る」で表示してスクロールした位置を保持する

Question

こんにちはWebデザイナーです。低レベルでしたらすみません。

コマースサイトで一覧ページ＝＞詳細ページという構成のサイトです。

現状の問題

一覧ページ⇔詳細ページの行き来のUXが悪い

下記手順で遷移すると、1でもっと見るを押して表示していたものがなくなって
最初の20件のみ表示になってしまう。

1. 一覧ページでもっと見るを押して、ページングする
2. もっと見るを押して表示した中の１つの商品をクリックして商品ページに行く
3. ブラウザバックで一覧に戻る

実現したいこと

1. ブラウザバックで戻っても、ページングした分の商品を読み込んだ状態にしたい。
2. スクロール位置を、2の位置（詳細ページにはいった商品がある位置）にしたい。

食べログやamazonなどは別タブになっていて。。。最近のトレンドは別ダブなのでしょうか？
なにかうまいこと実装しているサービスや、具体的な実装方法のを教えて下さい。

Answer 1

teratail にも前に同じ問題があって、別タブで対応されたみたいです。

トレンドかどうかはわかりませんが、 別タブにするのはリンクに target="_blank" を付けるだけので、修正はかなり簡単です。
気になっていないようであれば、別タブにしておくのが楽だと思います。

Comments

[退会済みユーザー]

yohshiyさん
遅ればせながら・・・回答ありがとうございます。
そうですね。別タブ対応に現状しているのですが別タブをやめてほしいという意見があり、何か方法がないかと思っていたところなので、別タブ以外で方法ご教授いただけると幸いです。

Answer 2

ブラウザバックした時に検索条件を復元するとなると、それをどこかに記録しておかないといけません。記録場所としては、

• Cookie
• sessionStorage
• URLのハッシュ部分

などがあります。ロード時にこれらへ記録されたデータを読み取って、状態を復元するという形になるでしょう。

Comments

[退会済みユーザー]

maisumakunさん
回答ありがとうございます。ちなみに、開発コストが低く、セキュリティなどの担保もできる方法としてはどれが一般的なのでしょうか？
手法のイメージはつくのですが、具体的な方法などご教授いただけると大変たすかります。