LocalStorage, SessionStorage, Cookie는 비슷하지만 데이터의 성격에 따라 잘 선택해서 사용해야하는 저장소이다.
정리하지 않으면 햇갈리는 경우가 있기때문에 한번 정리해보고자 한다.

Web Storage(브라우저 저장소)

• 해당 도메인과 관련된 데이터들을 서버가 아닌 클라이언트(웹브라우저)에 저장할 수 있는 기능이다.
• 데이터는 key-value 쌍으로 이루어져 있으며, key를 통해 데이터를 조회할 수 있다.
• 도메인 단위로 접근이 제한된다.
• 영구저장소(LocalStorage), 임시저장소(SessionStorage) 두가지를 통해 데이터의 지속성을 구분하고, 용도에 맞게 활용할 수 있다.

LocalStorage

• 도메인마다 storage가 생성되다.
• 도메인이 같으면 전역으로 공유가 가능.
• 브라우저를 종료하고 다시 실행해도 데이터가 유지된다.

SessionStorage

• 도메인마다 storage가 생성된다.
• 도메인이 같더라도 브라우저가 다르면 데이터 공유가 되지 않는다.(브라우저 컨텍스트가 다르기 때문)
• 브라우저를 종료하면 데이터가 삭제된다.

Cookie

• 클라이언트 로컬에 저장되니는 작은 데이터 파일이다.
• 클라이언트에 300개까지 쿠키 저장 가능하고, 하나의 도메인당 20개의 값을 가질 수 있다. 하나의 쿠기 값은 4KB까지 저장한다.
• Response Header에 Set-Cookie 속성을 사용하여 클라이언트에 쿠키를 만들 수 있다.
• 쿠키는 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송한다.
• 브라우저 저장소지만 백엔드와 연관이 있어 쿠키의 정보를 백엔드에서 확인할 수 있다.

Web Storage VS Cookie

• 쿠키는 매번 서버로 전송된다
  웹사이트에서 쿠키를 설정하면 이후 모든 요청은 쿠키 정보를 포함해 서버로 전송된다. 하지만 web storage는 데이터가 클라이언트에만 존재하고 서버로 전송되지는 않는다. 때문에 web storage를 사용하면 네트워크 트래픽 비용을 줄여준다.
• Web Storage는 영구 데이터 저장이 가능하다.
  쿠키는 expired 시간을 지정하여 데이터가 사라지게 된다. 만약 expired time을 지정하지 않으면 세션쿠키가 된다. 영구적인 쿠키를 원한다면 expired 시간을 굉장히 길게 설정하여 만들 수 있다.
  하지만 Web Storage는 expired time을 설정하는 것이 없이, 영구적으로 데이터를 저장할 수 있다.
• Web Storage는 용량의 제한이 없다.
  하지만 쿠키는 최대 300개, 도메인당 20개, 하나의 쿠키는 최대 4KB로 제한되어 있다.
• Web Storage는 객체 형태로 데이터를 저장할 수 있다.

Reference

[인프런x코드캠프] 부트캠프에서 만든 고농축 백엔드 코스