はじめに

この記事は以前投稿した【rails入門】javascriptを用いてリロードしてもチェックボックスの値を維持する（本題）という記事でやっていたことと同じことをよりスマートに書いたものです！
プログラミング初心者の僕にコメントでご教授いただいたことに感謝してこの記事を書いています！それでは早速やっていきましょう！！

現状とやりたいこと

ゲーム名がランダムで1つ表示されるようなガチャを作りたい
タグ検索機能を使ってジャンルを絞り込めるようにしたい
絞り込む時に使用するチェックボックスをリロードした時も、リロード前と同じ値を維持したい

今回は3つ目のリロードした時も、リロード前と同じ値を維持したいこれをやっていきます

1.今のチェックボックス

現状こんな感じでチェックボックスをrailsで作っています

gatya.html.erb

<%= form_tag({controller:"tweets",action:"gatya"}, method: :get) do %>
    <div class="game">
        <% if !@tweet.nil? %>
            <h1><%= @tweet.name %></h1>
        <% else %>
            <h1>no hit</h1>
        <% end %>
        <button type="submit" id="submit">
            <i class="fa-solid fa-arrows-rotate"></i>
            次へ
        </button>
    </div>
    ジャンル：
    <% Genre.all.each do |g| %>
        <%= check_box :genre_ids, g.name, checked:true, class:"check" %>
        <%= g.name %>
    <% end %><br>
    機種：
    <% Console.all.each do |t| %>
        <%= check_box :console_ids, t.name, checked:true, class:"check" %>
        <%= t.name %>
    <% end %><br>
<% end %>

大事なことはcheck_boxにclass:"check"が入っていることだけです！

2.javascriptを書いていく

今回はsessionStorateというものを使ってチェックボックスの値を保存します

sessionStorageはブラウザを開いている間のみデータを保存できる
loacalStorageはブラウザを閉じてもデータを維持できる

参照：https://qiita.com/uralogical/items/ade858ccfa164d164a3b

gatya.html.erb

<%= form_tag({controller:"tweets",action:"gatya"}, method: :get) do %>

    # 省略

<% end %>

<script>
    var object = {
        strageName: 'checkBoxStatus',
    };
    object.strageData = sessionStorage.getItem(object.strageName);
    object.strageData = object.strageData ? JSON.parse(object.strageData) : [];

    window.addEventListener('DOMContentLoaded', () => { //まずこのページ開いた時に動く
        object.checkBoxList = document.querySelectorAll('.check');
　　　　　　　　　　　　　　　　//class名がcheckの要素を全てlistに変えてobject.checkBoxListに格納する
        object.strageData.forEach((bool, i) => object.checkBoxList[i].checked = bool);
　　　　　　　　　　　　　　　　//1行上で取得した要素からチェックボックスのステータスをobject.strageDataに基づいて変更していく
    });

    window.addEventListener('beforeunload', () => { //リロードする直前に動く
        object.checkBoxList.forEach((elem, i) => object.strageData[i] = elem.checked);
        //リロードする直前にobject.strageDataの内容を更新している
        sessionStorage.setItem(object.strageName, JSON.stringify(object.strageData));
　　　　　　　　　　　　　　　　//更新した内容をsessionStorageに保存
    });
</script>

sessionStrageは辞書型のみ保存できるのでkeyとvalueが必要！なのでcheck_boxの値はlistとして保存できないので

keyが　strageData
valueが　[true, false, false, true, ...]
みたいな感じで保存してる↓↓↓

{
    strageData: [true, false, false, true, ...],
}

何か思ったことあれば、質問でも改良案でもコメントにてお待ちしております！！
それではバイバイバーーーい