質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

ブラウザバック時に、直前に入力したラジオボタン・チェックボックスの状態を表示させたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,424

score 7

ラジオボタン(製品カテゴリ)とチェックボックス(製品サイズ)にて製品を絞り込める一覧ページを構築しました。
ラジオボタン・チェックボックスによる絞り込み実装はなんとかできたのですが、遷移先ページにてブラウザの戻るボタンで一覧ページに戻った時の表示に関し、ブラウザごとに違いが出てしまいます。

Firefox:遷移直前の製品が絞り込まれた状態を表示(理想)
Chrome:各ボタンにチェックはされているが、表示されている製品が絞り込まれていない(全表示)状態が表示。
Edge:checked指定項目以外は何も選択されていない初期状態が表示

応急処置としてwindow.onpageshowを用い、ブラウザバック=初期状態とさせて挙動を均一化させておりますが、理想としてはFirefox以外のブラウザも直前の選択状態を保持した状態で一覧ページに戻らせたいです。

色々と調べたところsessionStorageを上手く使えば実現できそうな気はしてるのですが、今回のケースに適したkeyやvalueの設定・記述方法がよく分からず、質問させていただいた次第です。

こちらの知識不足申し訳ございませんがご教示いただけますと幸いです。
何卒よろしくお願いいたします。

該当のソースコード

<!--ラジオボタン・チェックボックス-->
<form>
  <div class="search-box category_search_box">
    <label>
      <input type="radio" name="category" value="" checked="checked" class="radio_input">
      <span class="radio_btn">全ての製品</span></label>
    <label>
      <input type="radio" name="category" value="ビジネス向け" class="radio_input">
      <span class="radio_btn">ビジネス向け</span></label>
    <label>
      <input type="radio" name="category" value="一般向け" class="radio_input">
      <span class="radio_btn">一般向け</span></label>
  </div>
  <div class="search-box size_search_box">
    <label>
      <input type="checkbox" name="size" value="15インチ" class="checkbox_input">
      <span class="checkbox_parts">15インチ</span></label>
    <label>
      <input type="checkbox" name="size" value="14インチ" class="checkbox_input">
      <span class="checkbox_parts">14インチ</span></label>
    <label>
      <input id="checkAll" type="checkbox" name="size" value="" class="checkbox_input">
      <span class="checkbox_parts">全サイズ選択</span></label>
  </div>
</form>
<!--製品リスト-->
<div class="list">
  <ul class="list_item" data-category="ビジネス向け" data-size="15インチ">
    <li><a href="製品ページA"><img src="製品画像A.jpg" alt="製品A"></a></li>
    <li>
      <h2>製品A</h2>
    </li>
  </ul>
  <ul class="list_item" data-category="一般向け" data-size="15インチ">
    <li><a href="製品ページB"><img src="製品画像B.jpg" alt="製品B"></a></li>
    <li>
      <h2>製品B</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="ビジネス向け" data-size="14インチ">
    <li><a href="製品ページC"><img src="製品画像C.jpg" alt="製品C"></a></li>
    <li>
      <h2>製品C</h2>
    </li>
  </ul>
  <ul class="product_item list_item" data-category="一般向け" data-size="14インチ">
    <li><a href="製品ページD"><img src="製品画像D.jpg" alt="製品D"></a></li>
    <li>
      <h2>製品D</h2>
    </li>
  </ul>
</div>
<script>
var searchBox = '.search-box';
var listItem = '.list_item';
var hideClass = 'is-hide';
var checkAll = '#checkAll';
var checkBox = 'input[name="size"]';

$(function() {
    $(document).on('change', searchBox + ' input', function() {
        search_filter();
    });
});

$( checkAll ).on('click', function() {
    $( checkBox ).prop('checked', $(this).is(':checked') );
  });

  $( checkBox ).on( 'click', function() {
    var boxCount = $( checkBox ).length;
    var checked  = $( checkBox + ':checked' ).length;
    if( checked === boxCount ) {
      $( checkAll ).prop( 'checked', true );
    } else {
      $( checkAll ).prop( 'checked', false );
    }
  });

function search_filter() {
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $(searchBox).length; i++) {
        var name = $(searchBox).eq(i).find('input').attr('name');
        var searchData = get_selected_input_items(name);
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        for (var j = 0; j < $(listItem).length; j++) {
            var itemData = get_setting_values_in_item($(listItem).eq(j), name);
            var check = array_match_check(itemData, searchData);
            if(!check) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($(this).val());
    });
    return searchData;
}
function get_setting_values_in_item(target, data) {
    var itemData = target.data(data);
    if(!Array.isArray(itemData)) {
        itemData = [itemData];
    }
    return itemData;
}
function array_match_check(arr1, arr2) {
    var arrCheck = false;
    for (var i = 0; i < arr1.length; i++) {
        if(arr2.indexOf(arr1[i]) >= 0) {
            arrCheck = true;
            break;
        }
    }
    return arrCheck;
}
</script>

試したこと

取り急ぎ各ブラウザの挙動を統一したく、不本意ながらブラウザバック=ページリフレッシュの対応中。

<script>
      window.onpageshow = function(){
        document.getElementById("selectForm").reset();
      };
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • azuapricot

    2019/11/27 21:26

    ブラウザバック問題はよくあることですが、避けれるのであれば避けた方が良いですよね
    戻るボタンを設置するとかブラウザバックを禁止するとか・・・。
    cookieやセッションを使って実装したことはありますが管理が大変なのであまりおすすめできません

    キャンセル

  • taroccoli

    2019/11/28 09:40

    コメントいただきありがとうございます!
    ブラウザバックとはあまり闘わない方がいい、ということなんですね。。

    「戻るボタンを設置するとかブラウザバックを禁止するとか」との箇所に質問をさせてください。
    history.back()を用いた戻るボタンを飛び先の各ページに設置し、そちらをクリックして一覧ページへ戻ってもらう仕様にすれば、絞り込み選択結果を保持したページに戻らせることが可能かも、ということでしょうか?
    見当違いの質問でしたら申し訳ございませんが、お手すきの時にお返事いただけますと幸いです。

    キャンセル

  • azuapricot

    2019/11/28 09:54

    ブラウザ毎にそろえたいとのことだったので、戻るボタンを設置して、押下時の処理を追加で記述する方が簡単なのでは?と思っただけです(ブラウザ毎に動作確認はしてないので何とも言えませんが)

    キャンセル

回答 2

+1

結局、社内プレビューにて「クリティカルな問題ではない」という判断にいたり、ブラウザバック=ページリフレッシュのまま進行する形になりました。
コメントいただいた皆様ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

この質問内容だけでは仕様が不明瞭ですが、質問を読む限りでは sessionStorage を使うのが常套手段だろうと思います。
ただし、keyやvalueの設定・記述方法については、仕様が不明瞭なため回答できません。

ですが、keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもないと思います。
sessionStorage とは、とりあえずは「値の設定や取得に専用の関数を使わないといけなかったり、key と value が共に文字列に制限されていたりするだけで、中身は JavaScript のオブジェクトと同じ」と思っておけばいいです。
例えばチェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方だろうと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/28 10:50

    この度はご回答いただきありがとうございます。
    「仕様が不明瞭」「keyやvalueの設定・記述方法は、そもそもわざわざ聞くようなものでもない」とのことで、私の知識の無さにより貴重なお時間とお手間を使わせてしまい、誠に申し訳ございませんでした。
    webStorageを扱うにあたっては知識や実力不足であることを痛感いたしました。。
    「チェックボックスの場合は、id を key、checked の値を value として保存するのが普通のやり方」と具体的なアドバイス頂戴できましたので、もう少しもがいてみようかと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る