[JS] 웹 스토리지 - localStorage 다루기

Window.localStorage

브라우저 상에서 데이터를 보관할 수 있는 데이터 저장소

 

특징

• (key - value) 형태로 저장된다.
• value로 저장된 값은 String 형태로만 저장된다.
• 페이지가 닫혀도 저장된 데이터는 영구적으로 보관된다.

 

사용하기

데이터 쓰기(Create)

// 형태
localStorage.setItem(key, value);

// 예제
localStorage.setItem('myPet', 'Tom');

• setItem - key, value 쌍을 이루어 데이터를 저장하는 메서드
• setItem 메서드 인수의 첫번째 위치에는 고유한 key 값을 두번째 위치에는 저장할 데이터를 작성한다.
• 해당 예제에서는 key는 myPet, value는 Tom이 쌍을 이루어 저장되어 있다.

데이터 읽기(Read)

// 형태
localStorage.getItem(key);

// 예제
const name = localStorage.getItem('myPet');
console.log(name); // Tom

• getItem - 해당 key에 저장해놓은 value 값을 불러오는 메서드
• ‘myPet’을 key로 지정하여 데이터를 저장해놓은 값 ‘Tom’을 name 변수에 보관하여 출력하고 있다.

데이터 수정(Update)

// 예제
localStorage.setItem('myPet', 'Rain');
const name2 = localStorage.getItem('myPet');
console.log(name2); // Rain

• setItem 메서드를 활용하여 데이터를 저장할 때 고유한 key 값을 쓰지 않고 저장하면 기존 key 값을 활용하여 저장되어 있던 값에 덮어씌워진다.
• 덮어씌워지는 특징을 활용하여 데이터를 수정할 수 있다.
• name2는 ‘Tom’이 아니라 ‘Rain’이 출력되는 것을 볼 수 있다.

데이터 삭제(Delete)

// 형태
localStorage.removeItem(key);
localStorage.clear();

// 예제
localStorage.removeItem('myPet');

• removeItem - 저장되어 있는 key를 인수로 지정하여 데이터를 지우는 메서드
• clear - 모든 데이터를 삭제하는 메서드

기타

localStorage.length;

localStorage.key(index);

• length - 저장된 항목의 갯수를 반환
• key - index와 일치하는 key 값을 반환

 

활용하기

// script.js
const $key = document.querySelector('.key');
const $value = document.querySelector('.value');
const $saveBtn = document.querySelector('.save');
const $loadBtn = document.querySelector('.load');
const $deleteBtn = document.querySelector('.delete');
const $resetBtn = document.querySelector('.reset');

$saveBtn.addEventListener('click', function (e) {
  const Key = $key.value;
  const Value = $value.value;
  localStorage.setItem(Key, Value);
});

$loadBtn.addEventListener('click', function () {
  const keyString = prompt('key 값을 입력하세요.');
  alert(localStorage.getItem(keyString));
});

$deleteBtn.addEventListener('click', function () {
  const keyString = prompt('삭제할 데이터에 해당하는 key를 입력하세요.');
  localStorage.removeItem(keyString);
});

$resetBtn.addEventListener('click', function () {
  const bool = confirm('초기화하시겠습니까?');
  if (bool === true) {
    localStorage.clear();
  }
});

• ‘저장’ 버튼을 누르면 input 태그의 value 값들을 각각 key와 value 형태로 저장
• ‘데이터 불러오기’ 버튼을 누르면 prompt를 실행하여 저장된 key 값을 입력하고, 해당하는 value 값을 alert 창에 전달하여 출력
• ‘데이터 삭제하기’ 버튼을 누르면 prompt를 실행하여 삭제할 데이터의 key 값과 일치하는 데이터를 삭제
• ‘초기화’ 버튼을 누르면 confirm을 실행하여 확인을 누르면 저장된 모든 값들을 삭제

---

참고

Window.localStorage - Web API | MDN

localStorage와 sessionStorage