모두 클라이언트 상에서 key / value 쌍을 저장할 수 있는 매커니즘이다.
이때 value는 반드시 문자열 이어야 한다.
또한 모두 동일 출처 정책을 따르기 때문에 다른 도메인에서 접근할 수 없다.
| cookie | local storage | session storage | |
|---|---|---|---|
| 생성자 | 클라이언트/서버 | 클라이언트 | 클라이언트 |
| 지속시간 | 설정 여부에 따름 | 명시적으로 지울때까지 | 탭 / 윈도우 닫을 때까지 |
| 용량 | 5KB | 5MB / 10MB | 5MB |
| 서버와의 통신 | O | X | X |
| 취약점 | XSS / CSRF 공격 | XSS 공격 | XSS 공격 |
Localstorage (영구저장소) 와 SessionStorage(임시저장소)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞게 선택할 것.
LocalStorage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.
도메인마다 별도로 로컬 스토리지가 생성된다.
Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
SessionStorage
SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
SessionSotrage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
cookie
- 데이터를 보관할 기간을 설정 가능하다
- Server-Side에서 사용되는 데이터를 주로 저장한다
- 매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정시)
- HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다.
데이터 유지 측면
LocalStorage는 브라우저를 종료해도 데이터는 보관 되어 다음에도 사용하가능하다.
SeesionStorage는 브라우저가 종료되면 데이터도 같이 종료되기에
이 둘의 차이점을 인지하고 데이터를 넣어놓을 공간을 정하자.
참고 https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/web-storage-api.md
