로컬스토리만 사용해보고 .. 세션스토리지,쿠키는 대충 알지만... 정확히 모르는 나를 위해 정리하는 글 ^^
web storage
- HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장했어야 했다.
- HTML5부터 Web Storage는 더 안전하게 웹 사이트 성능에 영향을 주지 않고 많은 양의 데이터를 로컬에 저장할 수 있게되었다.
- 쿠키와 달리 저장 한도가 훨씬 더 크고, 정보가 서버로 전송되지 않는다.
- Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
- 또한 영구저장소(로컬스토리지) 와 임시저장소(세션스토리지)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 맞는 선택이 가능하다.
- Web Storage는 클라이언트에 데이터를 저장하기 위한 2가지 개체를 제공한다.
window.localStorage // 1
window.sessionStorage // 2
localStorage 객체
- 로컬스토리지 객체는 만료 날짜 없이 데이터를 저장한다.
- 브라우저를 닫아도 데이터는 삭제되지 않고, 계속해서 사용할 수 있다.
- Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
sessionStorage 객체
- 로컬스토리와 유사하나 객체는 하나의 세션에 대한 데이터만 저장한다는 점이 다르다.
- 사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제된다.
- windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
데이터 범위 측면에서의 로컬스토리지와 세션스토리지
- 세션스토리지의 경우 Web Storage의 기본 보안처럼 도메인별로 별도로 생성된다. 더해서 같은 사이트,같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다. (브라우저 컨텍스트가 다르기 때문)
- 로컬스토리지는 도메인만 같으면 전역적으로 공유가 가능하다.
- Web Storage의 보안은 서로 다른 도메인의 데이터 침범은 막지만 클라이언트(사용자)는 막지 않는다.
즉, 사용자는 얼마든지 저장된 값을 수정가능하다. 이것은 쿠키와도 동일한 개념이다.
web storage를 지원하는 브라우저
표에서 숫자는 웹스토리지를 완전히 지원하는 첫 번째 브라우저 버전을 지정
그렇다면 web stoage와 cookie의 차이점은?
- 쿠키는 매번 서버로 전송된다.
브라우저에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포하하여 서버로 전송된다.
하지만 Web Storage는 서버에 전송 없이 데이터가 클라이언트에게 저장되어있다.
따라서 네트워크 트래픽 비용을 줄일 수 있다.
- 단순 문자열(스크립트)을 넘어 객체정보를 저장할 수 있다.
- 용량의 제한이 없다.
쿠키는 개수와 용량의 제한이 있다. (하나의 사이트에서 저장할 수 있는 최대쿠키수 20개, 하나의 최대 쿠키크기 4KB) 하지만 Web Storage는 제한이 없다.
- 영구 데이터 저장이 가능하다.
쿠키는 만료일자를 지정하게 되어있다. 만료일자로 지정된 날짜에 쿠키는 제거된다. 만약 만료일자를 지정하지 않으면 세션쿠키가 된다. 하지만 Web Storage는 만료기간의 설정이 없다. 따라서 영구적으로 데이터를 저장할 수 있다.
참고자료
https://www.w3schools.com/html/html5_webstorage.asp
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
'개발자가 꼭 알아야할 지식' 카테고리의 다른 글
| MCU란 무엇이고 PC와 주변장치의 상호작용에 대해 알아보기 (1) | 2023.12.13 |
|---|---|
| 👩🏻💻[이미지 포맷과 점진적 향상기법] (0) | 2022.03.30 |