はじめに
引き続きJavaScriptの勉強をしました。
今回はブラウザにデータを保持するものを作りたいと考え、会社の研修で使った紙の資料である「行動習慣チェックリスト」をデジタル化してみました。
作ったもの
日付のところに〇△×をセレクトボックスから選択し、1カ月の習慣を記録していきます。
localStrageを用いることで集計したデータはブラウザ上に保持されます。
コードはかなり冗長で汚くなってしまったので今回は省略します。
今回の経験で学んだこと
localStrage
ブラウザにデータを保持する際に使ったもの。
今回は日毎にチェックした値を保存している。
当初はCookieを使用する予定だったが、こちらの方が使いやすそうだったので変更。
localStrageはKeyとValueのセットで使用され、値は文字列で使用される。
以下に簡単な例を載せます。
// Keyに値をセットする場合はsetItemを使用
localStorage.setItem("設定するKey", "Keyに設定するValue");
// Keyの値を取得する場合はgetItemを使用
let a = localStorage.getItem("取得するKey");
// Keyを削除する際はremoveItemを使用
localStorage.removeItem("削除するKey");
// Sample
// javascriptというKeyに文字列"difficult"を設定する
localStorage.setItem("javascript", "difficult");
// 変数aには文字列"difficult"が設定される
let a = localStorage.getItem("javascript");
insertAdjacentHTML
HTMLの追加時(集計ボタンを押す処理)に使用。
前回使ったinnerHTMLと同じ要領で使用する。
'beforebegin'や'afterbegin'などで挿入する位置を選択できる。
おわりに
当初は日付の部分をカレンダーにしたり、月ごとの結果を別途保存する機能を追加しする予定でしたが、操作が複雑化しそうなため止めました。
毎日の行動チェックであるため極力シンプルな方がいいですよね。