【６日目】メモ帳アプリの作成 [３]

１．本日の課題

本日も前回から作成しているメモアプリに機能を付け加える。前回では、localStrageの中に複数のメモ内容を保存できるようにした。
次は保存した日付と削除ボタンを付け加える。
まずは連想配列を使ってメモ内容と日付を結びつける。

See the Pen Memo2 by mizmizsan2 (@mizmizsan2) on CodePen.

このままではメモ内容をセーブしたときは良いもののリロードをしたときに内容と日付が反映されなくなっている。

原因はJSON.parse(localStorage.getItem('writeMemo${count}'))にあり、連想配列をそのままinnerHTMLに入れ込んでも表示はされない。
そこで1つずつ連想配列のmamoとdateを指定してinnerHTMLに戻さないといけない。

See the Pen Memo3 by mizmizsan2 (@mizmizsan2) on CodePen.

上のプログラムでは後で削除ボタンの追加がしやすいようにchunkData内にwriteMemoのキーを入れ込み、そのデータがnullでない場合に表示の処理を実行するようにする。
そしてchunkData内のデータをJSON.parseでchunk内に入れ、それぞれchunk.memo chunk.dateと指定し呼び出す。

しかしこのプログラムで問題になるのは、リロード前と後で日付の表示のされ方が違ってしまうこと。

• saveボタン押した後
  

• リロード後
  

そこで日付のフォーマットを調べて適用するとこのようになる。

See the Pen Memo4 by mizmizsan2 (@mizmizsan2) on CodePen.

まずは変数tに今の時刻(new Date())を入れ込み、年,月,日,時,分,秒をそれぞれ入れ込む。そして変数ttに得られた値６つを文字列として代入する。

        let t = new Date();
        let tt;

        let year = t.getFullYear();
        let month = t.getMonth() + 1;
        let day = t.getDate();
        let hour = t.getHours();
        let minute = t.getMinutes();
        let second = t.getSeconds();
        tt = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;

その後にttを連想配列に入れることで、リロード後も同じ表示をさせることができる。

２．本日学んだこと

連想配列はをそのままinnerHTMLにぶち込むことはできません。innerHTMLを使用する際は、そのままではなくキーを指定(ここではmemoとdate)を指定し一つずつ書き込まないといけない。

日付を表示したいときはなるべくフォーマットを使用する。例えばgetFullYearなどを使用し、ちゃんと人が見やすいような表示方法にする。
ここでは先に文字列に変換して配列内に入れたが、日付をそのまま代入して、取り出して表示するときに文字列に直すこともできる。