4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-07-05

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

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

完成品はこれ

大まかな処理:

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

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

2つの処理をこの一行でまとめてます。
(1)LS内のnotesというキー名が存在すれば、valueを取り出しparseし、notesに入れる。
(2)LSが空であれば、空の配列をparseし、notesに入れる。
スクリーンショット 2018-07-05 13.53.11.png

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

notesという配列にオブジェクト(1枚のカードを構成する要素で成り立ってます)を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/
この本を読んで得た知識や気づきを次回以降まとめていこうと思います。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?