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을 누르면 브라우저 리로드되기 때문에)

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 앱이나 로그인 양식 등
데이터를 유지하려는 상황에서는 효과적으로 사용할 수 있습니다.