[HTML5] Local Storage, Session Storage란?

Local Storage와 Session Storage는 Object와 비슷한 key-value형태의 WEB storage입니다.

 

단, 모든 key와 value는 String으로 저장됩니다! (Object와 Integer 모두 String으로 자동 변환!!!)

 

 

 

Local Storage (로컬 스토리지)

특징

- 사용자가 지우지 않는 이상 데이터가 브라우저에 영구적으로 남아있음 => 만료기간이 없음

- 읽기 전용 localStorage 속성을 사용하면 원본 Document의 Storage Object에 접근 가능

 

용도

- 자동 로그인

 

문법

myStorage = window.localStorage;

 

예제

- localStorage 객체에 접근하여 item 추가하기 (밑에 문법은 모두 동일한 결과를 유발합니다.)

localStorage.setItem('myCat', 'Tom');
localStorage.myCat = 'Tom';
localStorage['myCat'] = 'Tom';

- localStorage 객체에 접근하여 item 읽기

var cat = localStorage.getItem('myCat');

- localStorage 객체에 접근하여 item 삭제하기

localStorage.removeItem('myCat');

- localStorage 객체에 접근하여 item 전체 삭제하기

localStorage.clear();

 

 

 

Session Storage (세션 스토리지)

특징

- 세션이 끝나면 (윈도우를 종료하거나 브라우저를 닫으면) 데이터가 자동 삭제

* 브라우저가 열려있고 페이지를 refresh하거나 복원했을 때는 삭제되지 않음

- 새로운 탭이나 창에서 페이즐 열면 cookie 작동 방식과는 다른 최상위 레벨의 탐색 컨텍스트 값으로 새 세션이 시작

- 동일한 URL에서 여러 탭 또는 창을 열면 각 탭 또는 창에 대해 sessionStorage가 생성

- 탭 또는 창을 닫으면, 바로 sessionStorage의 객체가 삭제

 

용도

- 일회성 로그인

 

문법과 예제는 Local Storage와 동일합니다.

 

 

 

그렇다면 Cookie(쿠키)랑 다른점은? 쿠키도 브라우저에 저장하는데!

 

Cookie는 지난 번 stateless server 설명 POST에도 있듯이, statefule server 기반입니다.

서버와 통신할때 request header에 Cookie가 자동으로 담겨져 통신하지요.

Cookie의 용량은 4KB로 제한되어 있고, Server가 받았을 때 4KB 짜리 Cookie 내에는 쓸모없는 정보가 존재할 수 있습니다. => WEB Storage 내 데이터는 서버로 자동 전송되지 않습니다!

 

또 WEB Storage는 도메인별, 브라우저 별, 기기 별로 다르지만 Cookie보다 더 큰 용량의 데이터를 저장 가능합니다.

기기 별

- 모바일 : 약 2.5MB

- 데스크탑 : 약 5MB ~ 10MB

브라우저 별

- IE : 10MB

- 이외 브라우저 : 5MB

 

출처

- https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

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

- https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

- https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048