Cookie vs Local Storage vs Session Storage

Cookie vs Local Storage vs Session Storage 비교

	Cookie	Local Storage	Session Storage
장점	* 유효기간 명시가능   (브라우저 종료되어도 인증 유지) * 서버, 로컬에 정보를 저장 * 대부분의 브라우저가 지원	* 정보를 영구적으로 저장   (사용자가 삭제하는 않는 한) * 로컬에만 정보를 저장	* 윈도우, 탭 닫을시 정보 제거 * 로컬에만 정보를 저장
단점	* 서버로 계속 전송 * 데이터 낭비가 발생할수 있음	* HTML5를 지원하지 않는 브라우저의 경우 사용 불가
용량	4KB	5MB	5MB ~ 10MB

 

Cookie

• 매번 서버로 전송된다
• 단순 문자열을 넘어 객체 정보를 저장할 수 있다

 

Web Storage

 (HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.

 

① Local Storage

• 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. 앞서 말한대로 도메인마다 별도로 로컬 스토로지가 생성된다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다
• HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있

 

② Session Storage

• SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. SessionStorage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• 탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다