[JavaScript] 자바스크립트에서 Storage API 데이터 삭제하기

238_자바스크립트에서 Storage API 데이터 삭제하기

[적용]

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

---

[문법]

메소드	의미	반환
localStorage.remioveItem(키)	localStorage 해당 키 삭제	없음
localStorage.clear()	localStorage 데이터 삭제	없음

---

[내용]

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

 

HTML                                                                                                                                                              index.html

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

JavaScript (부분)                                                                                                                                               main.js

// 저장하기 버튼 클릭 시
btnSave.addEventListener('click', () => {
  // 텍스트 입력 박스의 문자열 가져오기
  const data = input.value;
  
  // localStorage에 저장
  localStorage.setItem('myKey1', data);
  localStorage.setItem('myKey2', data);
});

// 삭제하기 버튼 클릭 시
btnRemove.addEventListener('click', () => {
  // localStorage에서 삭제
  localStorage.removeItem('myKey1');
});

// 전체 삭제 버튼 클릭 시
btnClear.addEventListener('click', () => {
  // 전체 삭제하기
  localStorage.clear();
});

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김