[JS] Storage

로컬 스토리지 vs. 세션 스토리지

웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. 이 두 개의 매커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지는 반면에, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다.

다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.

 

기본 API

웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있습니다.

 

[세션 스토리지]

// key는 MY_SESSION, value는 here인 세션을 만들기

  sessionStorage.setItem("MY_SESSION", "here");

// key값으로 쉽게 가져올 수 있다.

  sessionStorage.getItem("MY_SESSION");

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제한다

  sessionStorage.removeItem("MY_SESSION");

// 몽땅 지우고 싶을 땐 clear()를 쓰면 된다

  sessionStorage.clear();

 

 

[로컬 스토리지]

// 키에 데이터 쓰기

localStorage.setItem("key", value);





// 키로 부터 데이터 읽기

localStorage.getItem("key");





// 키의 데이터 삭제

localStorage.removeItem("key");





// 모든 키의 데이터 삭제

localStorage.clear();





// 저장된 키/값 쌍의 개수

localStorage.length;

 

쿠키보다 로컬 스토리지에 저장하는 이유

•          LocalStorage는 Cookie보다 더 많은 정보를 저장할 수 있다.

(쿠키 4KB / 로컬 스토리지 5MB)

•          Cookie처럼 모든 http 통신에 딸려들어가지 않는다.

•          하지만 LocalStorage는 말그대로 로컬에 데이터가 다 남아있어서 보안상 취약해지기 쉽기 때문에, 무조건 LocalStorage에 토큰을 넣지는 않는다.