Web Storage

https://ko.javascript.info/localstorage
https://velog.io/@hs0217/%EC%BF%A0%ED%82%A4-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

클라이언트의 state를 클라이언트 단에서 저장, 관리
-> 클라이언트의 상태를 보존하지 못하는 HTTP 단점 보완

Web Storage(browser storage) =>

1.localStorage, 2. SessionStorage

서버 전송 없이 클라이언트에서 데이터를 다룰 수 있는 storage 개념
-> 단, 문자열 데이터 형식만 지원
브라우저 내에 key-value Pair 저장

localStorage

브라우저를 다시 실행하더라도 데이터가 사라지지않고 보존

SessionStorage

페이지를 새로고침해도 데이터가 사라지지 않고 보존

Cookie stores data in a browser, but why use Web storage objects?

1. 웹 스토리지 객체는 네트워크 요청 시 서버로 전송 X -> 쿠키보다 더 많은 자료 보관 가능
2. 서버가 HTTP 헤더를 통해 스토리지 객체 조작 X -> 웹 스토리지 객체 조작은 모두 JS내에서 수행
3. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진(origin)에 묶여있음. -> 오리진이 같은 데이터는 모든 탭과 창에서 공유됨.
   -> 프로토콜과 서브 도메인이 다르면 데이터에 접근 X