はじめに
この記事は以前投稿した【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はブラウザを閉じてもデータを維持できる
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, ...],
}
何か思ったことあれば、質問でも改良案でもコメントにてお待ちしております！！
それではバイバイバーーーい