【７日目】メモ帳アプリの作成 [４]

HTML,JavaScript,初心者

本日の課題

今日は前回までに作った機能にCSSで見やすいようなデザインにし、削除ボタンを追加します。
まずはメモ内容と日付のセット1つ1つに枠を設けてパッと見たときにわかりやすくなるようなデザインを書きます。今回はboxという名前にします。

ここで重要になってくるのがboxの位置ですがHTML側ではなくJavaScriptの innerHTML += ...のdivに直接入れ込むことで実現できます。HTML側に書いてしまうとメモ内容全体を囲む大きい一つの枠になってしまうので注意。

次はdeleteボタンを作成してメモ内容と日付のセットを削除できるようにします。deleteボタンも先ほどと同じようにJavaScript側に書きます。

削除する関数としてdeleteMemoを作成しました。
引数として渡す値はメモ内容などを保存しているlocalStrageのid(ここではwriteMemo)です。ここで渡す引数にchunkDataなどを渡してもストレージの中ではなく変数が変わってしまうだけなのでちゃんとストレージのidを直接渡さないといけません。

そして渡されたデータを消すのにはlocalStorage.removeItem()を使い、カッコ内に入れ込みます。

この状態では、
deleteボタンを押す→ページをリロードする→消える
という手順で削除をするのでdeleteボタンを押した瞬間に内容が削除されるようにします。

先ほどのプログラムのdeleteMemoにwindow.location.reload()を追加しました。こうすることで自動的にリロードされてメモを消すことができます。

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

@ri6616

@hzd248s2

2022-04-16 06:38

localStorageは1つのメモごとにストレージデータを割り当てるのではなく、全てのメモをひとまとまりのオブジェクトにして1つのストレージデータとして保存するとデータが分散することも無く、後々扱いが楽になりますよ。

<!DOCTYPE html>
<html lang='ja'>
<head>
  <meta charset='utf-8'>
  <title>メモ</title>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <input type='text' id='writeMemo'>
  <input type='button' value='save' id='save'>
  <hr>

  <div>
    メモ記録領域
    <p id='outputMemo'>
    </p>
  </div>

  <script>
  'use strict';
  const obj = {
    storageName: 'memo',
  };
  obj.storageData = localStorage.getItem(obj.storageName);
  obj.storageData = obj.storageData ? JSON.parse(obj.storageData) : {};

  const output = document.getElementById('outputMemo');

  const dateFormat = time => {
    const date = new Date(+time);
    date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    const p = date.toJSON().match(/\d+/g);
    return `${p[0]}/${p[1]}/${p[2]} ${p[3]}:${p[4]}:${p[5]}`;
  };

  const addMessage = (time, value) => {
    output.insertAdjacentHTML('beforeend',`
      <div class='box' data-time='${time}'>
        <p>${value.replace('<', '&lt;')} [${dateFormat(time)}]</p>
        <button id='${time}'>delete</button>
      </div>`);
  };

  window.addEventListener('DOMContentLoaded', () => {
    for(const t in obj.storageData) {
      addMessage(t, obj.storageData[t]);
    }
  });

  document.getElementById('save').addEventListener('click', () => {
    const writeMemo = document.getElementById('writeMemo');
    const value = writeMemo.value.trim();
    if(value === '') return;
    const time = Date.now();
    obj.storageData[time] = value;
    localStorage.setItem(obj.storageName, JSON.stringify(obj.storageData));
    addMessage(time, value);
    writeMemo.value = '';
  });

  document.addEventListener('click', e => {
    const t = e.target;
    if(t.tagName !== 'BUTTON') return;
    const message = document.querySelector(`.box[data-time='${t.id}']`);
    if(!message) return;
    delete obj.storageData[t.id];
    if(Object.values(obj.storageData).length) {
      localStorage.setItem(obj.storageName, JSON.stringify(obj.storageData));
    }
    else {
      localStorage.removeItem(obj.storageName);
    }
    message.outerHTML = '';
  });
  </script>
</body>
</html>

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事投稿イベント開催中

新人プログラマ応援 - みんなで新人を育てよう！

2022/03/27~2022/04/30

データに関する記事を書こう！

2022/03/14~2022/04/30

すべて見る

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る