웹 스토리지(web storage)

API

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

웹 스토리지(web storage)에는 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage)가 있다.

두개의 차이는 데이터가 어떤 범위 내에서 얼마나 보존되느냐의 차이이다.

 

세션 스토리지 : 웹페이지의 세션이 끝날 때 저장된 데이터가 소멸

- 브라우저에서 여러 탭이나 창을 띄우면, 여러 세션 스토리지에 데이터가 서로 격리되어 저장되고,

  탭이나 창이 닫힐 시 데이터가 소멸된다.

 

로컬 스토리지 : 웹페이지의 세션이 끝나더라도 데이터가 유지

- 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 유지.

 

사용 코드

//데이터 삽입
localStorage.setItem("name", "story");

//데이터 조회
localStorage.getItem("name");   //"story" 출력

//데이터 삭제
localStorage.removeItem("name");

//모든 데이터 삭제
localStorage.clear();

//데이터 갯수
localStorage.length;


세션 스토리지의 경우
localStorage를 SessionStorage로 바꾸기만 하면 된다.

 

※참 고

엄밀하게는 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성과 마찬가지로

줄여서 localStorage로 로컬 스토리지 객체에 접근할 수 있다.

 

▶ 추가로 ◀

웹 스토리지는 오직 문자형(String) 데이터 타입만 지원한다.

따라서, 아래와 같이 객체형 데이터를 저장할때 문제가 생길 수 있다.

해결 방안으로는 JSON 형태로 데이터를 읽고 쓰는 것이다.

로컬 스토리에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고,

읽은 데이터를 JSON 형태로 역직렬화(deserialization) 해주면 원래의 데이터를 얻을 수 있다.

 

JSON.stringify로 직렬화 하고 JSON.parse로 역직렬화한 사용결과