Web Storage (localStorage, sessionStorage, cookie)

참조문서

• https://developer.mozilla.org/ko/docs/Web/API/Storage
• https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

1. Web Storage란?

Web Storage는 HTML5 에서 추가된 저장소이다. 간단한 키와 값을 저장(key-value Storage)할 수 있다. Web Storage를 상속받아 구현된 localStorage와 sessionStorage가 존재한다.

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

1-1. 로컬스토리지(localStorage)

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

1-2. 세션스토리지(sessionStorage)

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

1-3. 공통 메소드

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

1-4. 공통 사용예제

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

2. 쿠키(cookie) 를 다시보자

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

3. 각각의 차이점

2-1. 쿠키 vs Web Storage

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

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

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

    // A 페이지에서 저장
    > localStorage.setItem("영구", "devljh");
    > sessionStorage.setItem("맹구", "devljh");
    > localStorage.getItem("영구");
    < "devljh"
    > sessionStorage.getItem("맹구");
    < "devljh"
  
    // 위와 같은 A 페이지이지만 다른 창(NEW TAB)
    > localStorage.getItem("영구");
    < "devljh"
    > sessionStorage.getItem("맹구");
    < null