Web Storage는 HTML5에 포함되어 있는 스펙으로, 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조이다.
Web Stroage는 {key: value} 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회한다.
그리고 영구저장소(localStorage), 임시저장소(SessionStorage)로 나눠져 있어 데이터의 지속성에 따라 선택하여 사용할 수 있다.
Web Storage는 데이터 지속성에 따라 두 가지 용도의 저장소를 제공한다.
기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없다는 뜻이다.
localStorage
- 데이터를 명시적으로 지우지 않는 이상 영구적인 보관이 가능
- 브라우저를 껐다 켜도 데이터가 유지됨
- window 전역 객체의 localStorage라는 컬렉션을 통해 저장/조회가 이루어짐
- 도메인만 같으면 전역적으로 공유가 가능
sessionStorage
- 지속성과 엑세스 범위에 특수한 제한이 존재함
- 브라우저가 종료되면 데이터가 지워짐
- 같은 도메인이라 할지라도 실행되고 있는 브라우저나 탭이 다르면 sessionStorage는 각각 별개의 영역이 되므로 서로 침범할 수 없음
쿠키는 매번 서버로 전송된다.
웹사이트에서 쿠키를 설정하면 이후 발생하는 모든 웹 요청은 서버로 전송된다. 그러나 Web Storage는 클라이언트에 저장될 뿐 서버로 전송되지 않는다. 이로 인해 네트워크 트래픽 비용을 줄일 수 있다.
문자열뿐 아니라 객체를 저장할 수 있다.
용량 제한이 없다.
하나의 사이트 당 저장할 수 있는 최대 쿠키는 20개, 용량은 4KB. 그러나 Web Storage에는 용량이나 갯수 제한이 없다.
영구 데이터 저장이 가능하다.
쿠키는 만료일자를 지정하게 되어있어 데이터가 만료되게 된다. 그러나 Web Storage는 만료 기간 설정이 없다.
구분 | localStorage | SessionStorage | Cookie |
---|---|---|---|
서버 전송 여부 | X | X | O |
만료 기간 | 만료 기간 없음 | 브라우저 또는 탭이 닫힐 때까지 | 만료 기간을 설정할 수 있음 |
크기 | 제한 없음 | 제한 없음 | 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