Web Storage API

• key와 value를 이용하여 저장하며 모든 key와 value는 항상 String으로 저장된다

• 저장된 값 확인하는 방법

  • 개발툴 -> application -> 저장용량에서 localStorage와 sessionStorage 둘 다 확인 가능

종류

• localStorage : 데이터를 사용자 local에 저장하며 저장,삭제 등 조작이 가능하고 저장된 데이터는 만료기간이 없다
  • 주의 : 크롬에서 사파리로 넘어가는 등 다른 브라우저로 넘어가게 되면 서로 다른 두개의 localStorage에 저장된다
    
    
• sessionStorage : 저장된 데이터는 브라우저가 종료되면 지워진다

sessionStorage와 localStorage는 쓰임새만 다를 뿐 사용 방식은 동일하다. localStorage 자리에 sessionStorage를 사용하면 된다.

따라서 여기서는 localStorage만 설명한다. (프로젝트에 localStorage 써서 더 친숙한건 비밀.... 😅)

😄 Code 1. 데이터 추가 (setItem)

// 데이터 추가하기 (key, value)
localStorage.A = 'sample'; // key는 A이고 value는 sample이다
localStorage.setItem('B', 'B입니다'); // key는 B이고 value는 B입니다 이다

• 위 2개의 코드는 동일한 코드
• 데이터가 key(이름), value(저장할 내용) 형식으로 추가된다
• localStorage.setItem('D', 'D입니다');를 사용자가 지워도 여전히 localStorage에 남아있다 (지우고 싶으면 아래 참고)

😄 Code 2. 데이터 취득 (getItem)

const test = localStorage.A;
const test2 = localStorage.getItem('B');
// 화면에 출력하기
document.querySelector('.test').innerHTML = test;
document.querySelector('.test').innerHTML = test2;

• 위 두개의 코드는 동일

😄 Code 3. 데이터 삭제 (removeItem)

localStorage.removeItem('B'); // key가 B인 데이터 삭제

• localStorage에서 삭제된다

😄 Code 4. 데이터 전부 삭제 (clear)

localStorage.clear();

• localStorage에 있는 모든 key와 value가 삭제된다

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍