LocalStorage / SessionStorage / Cookie

graphicnovel·2021년 1월 28일
0

Web

목록 보기
4/5
post-thumbnail

Web Storage

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

Web Stroage는 {key: value} 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다.

그리고 영구저장소(localStorage), 임시저장소(SessionStorage)로 나눠져 있어 데이터의 지속성에 따라 선택하여 사용할 수 있다.


localStorage vs sessionStorage

Web Storage는 데이터 지속성에 따라 두 가지 용도의 저장소를 제공한다.

기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다는 뜻이다.

  • localStorage
    - 데이터를 명시적으로 지우지 않는 이상 영구적인 보관이 가능
    - 브라우저를 껐다 켜도 데이터가 유지됨
    - window 전역 객체의 localStorage라는 컬렉션을 통해 저장/조회가 이루어짐
    - 도메인만 같으면 전역적으로 공유가 가능

  • sessionStorage
    - 지속성과 엑세스 범위에 특수한 제한이 존재함
    - 브라우저가 종료되면 데이터가 지워짐
    - 같은 도메인이라 할지라도 실행되고 있는 브라우저나 탭이 다르면 sessionStorage는 각각 별개의 영역이 되므로 서로 침범할 수 없음


Cookie와 Web Storage의 차이점

  • 쿠키는 매번 서버로 전송된다.
    웹사이트에서 쿠키를 설정하면 이후 발생하는 모든 웹 요청은 서버로 전송된다. 그러나 Web Storage는 클라이언트에 저장될 뿐 서버로 전송되지 않는다. 이로 인해 네트워크 트래픽 비용을 줄일 수 있다.

  • 문자열뿐 아니라 객체를 저장할 수 있다.

  • 용량 제한이 없다.
    하나의 사이트 당 저장할 수 있는 최대 쿠키는 20개, 용량은 4KB. 그러나 Web Storage에는 용량이나 갯수 제한이 없다.

  • 영구 데이터 저장이 가능하다.
    쿠키는 만료일자를 지정하게 되어있어 데이터가 만료되게 된다. 그러나 Web Storage는 만료 기간 설정이 없다.


localStorage vs SessionStorage vs Cookie

구분localStorageSessionStorageCookie
서버 전송 여부XXO
만료 기간만료 기간 없음브라우저 또는 탭이 닫힐 때까지만료 기간을 설정할 수 있음
크기제한 없음제한 없음4KB
저장 유형문자열, 객체문자열, 객체문자열

참조

https://seunghyun90.tistory.com/43
https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

0개의 댓글