LINE2019.02.15この記事は約29分で読めます。スポンサーリンクウェブプログラミングをしていると、FormをSubmitしてデータをサーバーに送信してデータベースを検索して、その検索結果を表示するなどの操作を良く行う。textの入力文字列などを記憶して復元出来ると便利である。こんなフォームがあるとする。文字列チェックボックスチェック項目1チェック項目2チェック項目3チェック項目4チェック項目5チェック項目6セレクト選択項目1選択項目2選択項目3選択項目4選択項目5上のチェックボックスやセレクトなどを適当に変更して、このページを再読み込みする。すると、再読み込み前の状態に復元できるはずだ。当記事では、ワテが普段使っているその手法を紹介したい。忘れるのでワテの備忘録であるが。Textも同様の手法で記憶・復元可能とした全HTMLコード複数のチェックボックスグループが有る場合まとめウェブプログラミングのスクールに通うクライアントサイドとサーバーサイド今回のように、チェックボックスなどの状態を記憶して復元するにはいろんな手法がある。サーバーサイドで状態を復元するFormをSubmitすると、name属性で指定されているパラメータはサーバーサイドに送信される。それを配列に取り出してhtmlページを生成する時に利用すればチェック状態を復元する事が出来る。/>ワテの場合、PHPは初心者レベルなので間違いがあるかも知れない。サーバーサイドで復元する手法は、コードがシンプルで行数も少ないのでお勧めだ。当然ながらサーバーサイドに送信されていない要素が有れば、その状態は復元する事は出来ない。クライアントサイドで状態を復元するクライアントサイドとはブラウザー側の処理だ。チェック状態の記憶と復元をブラウザー側でやってみる。その為には、チェックボックスのチェック状態が変化する度に、その状態をパソコンに記憶するのだ。記憶する手段としては、クッキーLocalStorageなどが良く使われる。パソコンにデータを記憶すると言う目的では、クッキーでもLocalStorageでもどちらでも似た様なもんだ。ワテの場合は、最近はLocalStorageを使っている。理由は、クッキーだと有効期間を指定する必要があるがLocalStorageならそんなのは必要ないと言う単純な理由だ。こんなHTMLがあるとする。与えれば、サーバーに送信する事も可能だ。/>このHTMLにおいて、六つのチェックボックスのチェック状態が変化するたびにLocalStorageに状態を保管する関数を作成した。ページがloadされた時には、LocalStorageに保管されているデータが有ればそれを使ってチェック状態を復元する機能も入れている。objectのキーが来るのだ。save_restore1_checkbox('save-state1');処理内容は、そんなには複雑では無いのでJavaScriptが分る人なら説明しなくても処理の流れは分ると思う。チェックボックスのチェック状態が変化した場合にイベントハンドラが実行される。そのチェックボックスがチェックされた場合には、それをLocalStorageに書き込む。書き込むデータはオブジェクトをJSON文字列化したものにした。