localStorage, sessionStorage, cookie

web storage

web storage는 HTML5에서 추가된 저장소.
간단한 키와 값을 저장할 수 있다.
web storage를 상속받아 구현된 localStorage와 sessionStorage가 존재한다.

• 키와 값은 뭐가 들어와도 문자열로 변환되어 저장한다.
  - 객체를 읽고 쓰려면 JSON.stringfy, JSON.parse를 해야한다.
• 브라우저별 용량 제한이 다르다.
• origin(도메인)별 Storage는 다르며, origin별 용량제한이 있다.
  - 프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유한다.
• 이것마저 용량이 부족하다면 IndexedDB가 있다.

1. localStorage

• 로컬스토리지는 일부러 지우지 않는다면 브라우저를 닫고 열어도 계속 남아있다.
• 접근 : window.localStorage
• 사용예제: 지속적으로 필요한 데이터(자동로그인)

2. sessionStorage

• 세션스토리지는 페이지의 window가 바뀌거나 브라우저 탭을 닫을때 사라진다.
• 접근 : window.sessionStrage
• 사용예제 : 잠깐동안 필요한 정보(일회성 로그인 정보)

공통 메소드

• setItem(키,값) : 저장(이미있으면 update)
• getItem(키) : 조회
• removeItem(키) : 삭제
• clear():전체삭제
• key(n) : n번째 키의 이름 반환 (0부터시작)

공통 사용 예제

• 글 작성 중간 중간에 읽어버리지 않기 위한 임시 저장 용도
• 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우
• history를 저장하였다가 이동할 경우
• 그 외 서버에 반드시 저장할 필요가 없는 경우

Cookie

• 쿠키는 Web Storage가 나오기 이전에 브라우저에서 저장소 역할을 해왔다.
• 쿠키는 만료기한이 있는 key-value Storage이다.
• 쿠키는 하나의 도메인 페이지에서 최대 20개, 4kb 용량 제한이 있다.
• 매 요청마다 서버로 쿠기가 같이 전송된다. (쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문)
  - 서버로 전송안해도 되는 불필요한 데이터를 localStorage, sessionStorage에 저장하면 된다.
• 접근 : document.cookie

각각의 차이점

cookie vs Web Storage

• 쿠키 데이터는 서버로 전송되지만, Web Storage의 데이터는 전송되지 않는다.
• 쿠키 데이터와 달리 Web Storage의 데이터는 반영구저장이 가능하다.

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

• 데이터유지
  - 로컬스토리지는 clear,remove 하지 않는다면 영구저장하며
  - 세션스토리지는 해당 페이지의 window객체가 사라질때 사라진다.

참고 출처

• Web Storage (localStorage, sessionStorage, cookie)