JavaScriptでメモ帳を作る

10072 ワード
es2015 JavaScript JavaScript テキストリンク

目的

  • localStorageを利用し、全体像を理解する

結果

全体のコード


(() => {

'use strict';

let formArea    = document.getElementById('form-area');
let textArea    = document.getElementById('text-area');
let saveBtn     = document.getElementById('save-button');
let rmvBtn      = document.getElementById('remove-button');
let textData    = textArea.value;
let storageData = localStorage.getItem('data');

window.onload = () => {
  if(!textArea.value) {
    let parseData = JSON.parse(storageData);
    textArea.value = parseData;
  }
}

const saveText = () => {
  event.preventDefault();
  textData = textArea.value;
  return textData;
};

const sendStorage = () => {
  saveText();
  console.log(textData);
  localStorage.setItem('data', JSON.stringify(textData));
};

const removeText = () => {
  textArea.value = '';
  localStorage.removeItem('data', JSON.stringify(textData));
};

saveBtn.addEventListener('click', sendStorage, false);
rmvBtn.addEventListener('click', removeText, false);

})();

保存する関数について

まずはHTMLのbuttonの機能を停止する必要があります。(仕様上、buttonを押すとブラウザリロードされるため)

event.preventDefault(); // buttonの機能を停止

次にtextareaに入力された値を変数に格納し、他の関数で使いまわせるように戻り値にします。

textData = textArea.value;
return textData;

localStorageに送る関数を用意し、中で呼び出します。
またlocalSrorageは保存できる値が文字列のみのため、変換する必要があるのでその処理を加えます。

saveText(); // 戻り値を受け取る
console.log(textData); // 受け取れているか確認
localStorage.setItem('data', JSON.stringify(textData)); // 文字列に変換

保持する関数

localStorage内のデータを受け取り、それをtextAreaの入力欄に出力します。
そうすることでブラウザをリロードしても、値は保持されたまま表示されるようになります。
また、そのまま出力すると文字列データのまま、つまり "" がついたままになるので、
JSON.parseを用いることでオブジェクトに変換することが出来ます。


window.onload = () => {
  if(!textArea.value) {
    let parseData = JSON.parse(storageData);
    textArea.value = parseData;
  }
}

削除する関数

removeItemでlocalStorage内のデータを削除します。
またボタンが押された時にvalue = ''と空にすることで
入力欄の文字を削除します。


textArea.value = '';
localStorage.removeItem('data', JSON.stringify(textData));

まとめ

localStorageは半永久的にデータを保持することができるので、
これを利用してTODOアプリやログインフォームといった、
データを保持したい状況では有効に利用できます。