[책] 자바스크립트 코드 레시피 278 - 215일차

localStorage 사용하기

• 데이터를 브라우저에 영구 보존하고 싶을 때

구문

localStorage.setltem('myParam', data) localStorage에 저장
localStorage.getltem('myParam') localStorage에서 불러오기

설명

localStorage는 브라우저에 데이터를 간단하게 저장할 수 있습니다. window 객체에 localStorage 객체가 있으므로 위치에 상관없이 사용할 수 있으며, localStorage에 저장된 데이터는 기간 제한이 없습니다. setltem()을 사용해 데이터를 저장하며, 첫 번째 인수는 키, 두 번째 인수는 데이터를 전달합니다. 문자열, 숫자, 진릿값 객체, 배열 등 다양한 데이터 타입을 사용할 수 있습니다. getltem()을 사용해 저장된 데이터를 불러오며, 저장 시 사용한 키와 동일한 값을 인수로 전달합니다.

실습

index.html

<section class="localStorage">
  <h2>localStorage</h2>
  <input type="text">
  <button class="btnSave">저장하기</button>
  <button class="btnBead">불러오기</button>
</section>

---

script.js

const section = document.querySelector('.localStorage');
const btnRead = section.querySelector('.btnRead');
const btnSave = section.querySelector('.btnSave');
const input = section.querySelector('input');

btnSave.addEventListener('click', () => {
  const data = input.value;
  localStorage.setItem('myKey', data);
});

btnRead.addEventListener('click', () => {
  const data = localStorage.getItem('myKey');
  input.value = data;
});