WEBページの再読み込みを行っても、チェックボックスの選択状態を保持するJavaScript

プログラミング

WEBページで、チェックボックス、あるいはトグルボタンがあったとします。

チェックボックスにチェックしても、そのページを再読み込み(reload)すると、チェックボックスの選択は初期状態に戻ってしまいます。

1個や2個のチェックならまだよいですが、100個ぐらいのチェックボックスがあった場合、途中でリロードしたら、それまでにチェックしたものが全部無効になってしまうのは悲しいですね。

そこで、なんとか、チェックボックスのチェックを再読み込みしても保持する方法を考えてみました。

WEBストレージまたは、クッキーに保持するのがよいようです。

スポンサーリンク
スポンサーリンク

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ)の違い

クッキーとWEBストレージ (セッションストレージ、ローカルストレージ) の違いは次の通りです。

項目 セッションストレージ ローカルストレージ クッキー
データサイズ 大(5MB) 大(5MB) 小(4KB)
有効期限 セッションが続く限り 永続的 期限あり
通信 発生しない 発生しない リクエスト都度、サーバにも送信

ローカルストレージに値を保存するサンプルのJavaScriptを書いてみました。

https://jsfiddle.net/urashita/det1d58z/

ローカルストレージを使って、チェックボックスの状態を保持してみます。

ページの再読み込みでも、チェックボックスの状態を保持する方法

以下のJavaScript を用いれば、WEBページを再読み込みしてもチェックボックスの状態を保持します。

これは中々便利なコードですよ。

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp