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

Storage API 데이터 삭제하기

• Storage 데이터를 삭제하고 싶을 때

구문

localStorage.removeItem(key) localStorage 해당 키 삭제
localStorage.clear() localStorage 데이터 삭제

설명

localStorage와 sessionStorage에서 일부 데이터를 지정해서 삭제하는 경우 removeItem()을 사용하며, 인수는 데이터의 키입니다. 해당 도메인의 Storage 객체 전체를 삭제하는 경우에는 clear()를 사용합니다.

실습

index.html

<h2>localStorage</h2>
<input type="text">
<p>
  <button class="btnSave">저장하기</button>
  <button class="btnRemove">삭제하기</button>
  <button class="btnClear">전체 삭제하기</button>
</p>

---

script.js

const btnSave = document.querySelector('.btnSave');
const btnRemove = document.querySelector('.btnRemove');
const btnClear = document.querySelector('.btnClear');
const input = document.querySelector('input');

btnSave.addEventListener('click', () => {
  const data = input.value;
  localStorage.setItem('myKey1', data); // myKey1 저장
  localStorage.setItem('myKey2', data); // myKey2 저장
});

btnRemove.addEventListener('click', () => {
  localStorage.removeItem('myKey1'); // myKey1 삭제
});

btnClear.addEventListener('click', () => {
  localStorage.clear(); // 전체 삭제
});