Local Storageとオブジェクトのまとめ

４月からプログラミングスクールにフルタイムで通い始めて早３ヶ月、この機会に色々と復習して記事にまとめていこうと思います。わかりにくい点、間違っている点などありましたらコメントでご指摘ください。

まずはLocal Storageとオブジェクトを使ってメモパッドアプリを作った時に学んだ事を復習しようと思います。

完成品はこれ

大まかな処理：

重要度の高い処理だけをピックアップして解説します。完全なコードは↑の完成品を参照ください

const notes = JSON.parse(localStorage.notes || '[]');

２つの処理をこの一行でまとめてます。
（１）LS内のnotesというキー名が存在すれば、valueを取り出しparseし、notesに入れる。
（２）LSが空であれば、空の配列をparseし、notesに入れる。

function addNote() {
   notes.push({
      text: '',
      top: 60,
      left: 30,
      color: Math.floor(Math.random() * 10 / 2),
      zIndex: maxIndex + 1,
   });
   data2Dom();
   saveData();
}

notesという配列にオブジェクト（１枚のカードを構成する要素で成り立ってます）をpushする。
カードを新規作成した時に呼びます。

function data2Dom() {
   let html = '';
   for (let i = $('.note').length; i < notes.length; i++) {
      html += `
      <div class="note">
      <div class="handle"/>
      <textarea class="text"/>
      <div class="trash">Delete</div>
      </div>
      `;
   }
   $('#board').append(html);

   for (let i = 0; i < notes.length; i++) {
      const note = notes[i];
      $('.note').eq(i).css({
         zIndex: note.zIndex,
         top: `${note.top}px`,
         left: `${note.left}px`,
         background: colorList[note.color],
      }).children('.text').html(note.text);
   }
}

オブジェクトをDOMに描画する処理です。
一つ目はカードのオブジェクトが増えた時だけDOM要素を生成するので少し特殊なfor文です。
二つ目はnotesという配列内に存在する全てのオブジェクトにCSSを当てるので通常のfor文です。

function saveData() {
   localStorage.notes = JSON.stringify(notes);
}

notesという配列をJSON形式でLocal Storageに保存（key名はnotes）する。

data2Dom()とsaveData()は、オブジェクトが新規で作成された時はもちろん、プロパティに変更が起こる（テキスト内容を書き換えたり、ドラッグして動かしたり）毎に呼んでます。

最後に

オブジェクトはJavaScriptを使いこなす上で重要でそれだけに特化した本もあるほどです。https://www.oreilly.co.jp/books/9784873116815/
この本を読んで得た知識や気づきを次回以降まとめていこうと思います。