[Javascript] Web Storage

Web Storage란?

브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공하는 API

 

 

Web Storage의 종류

Web Storage는 sessionStorage, localStorage 두 가지가 있는데, 이름 그대로 세션과 로컬에서 동작한다.

 

또한 Window 객체를 통해 사용할 수 있다. 

ex) Window.sessionStorage, Window.localStorage

 

• sessionStorage
  • 페이지 세션에 한정해서, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다.
  • 데이터를 절대로 서버로 전송하지 않는다.
  • 저장 공간이 쿠키보다 크다. (최대 5MB)
• localStorage
  • 유효기간 없이 데이터를 저장하고, Javascript를 사용하거나 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
    (즉, 동일한 브라우저에서는 데이터가 영속성을 가진다.)
  • 저장 공간이 셋 중 가장 크다.
• 공통점 : 데이터를 브라우저에 저장한다.

 

제공 API

웹 스토리지는 getItem을 통해 값을 리턴받을 때 무조건 String을 반환한다.

 

그래서 타입 변환에 주의하며 사용해야 한다.

 

대안으로는 value를 JSON 형태로 사용하는 것이다.

// window.localStorage 혹은 localStorage로 접근 가능하다.

// 데이터 작성
localStorage.setItem('key', value);

// 데이터 읽기 (어떤 타입이든 무조건 String으로 리턴해준다)
localStorage.getItem('key');

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

// 스토리지 초기화
localStorage.clear();

// 저장된 key의 개수
localStorage.length;

 

예제

window.localStorage.setItem("name", "giwon"); // "name": "giwon" 형식으로 저장됨
const name = window.localStorage.getItem("name");

console.log(name); // 'giwon' 출력