브라우저에 데이터를 저장하는 데는 여러가지 종류가 있다.
애플리케이션 정적 리소스(HTML,JavaScript, CSS, 이미지 등)나 데이터(사용자 데이터, 기사 글 등)를 저장해야하는 것들은 다양하다.

웹 스토리지(Web Storage)

• 기존 쿠키(cookie)의 문제점을 극복하기 위해 HTML5 부터 추가된 기능이다.
• Local Storage와 Session Storage가 있다. 두 스토리지의 차이점은 영구성이다.
• Key-Value 객체 형태로 데이터가 저장된다.

로컬 스토리지 (Local Storage)

• 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 이상 영구적으로 저장된다.
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
• 지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인)

세션 스토리지 (Session Storage)

• 윈도우나 브라우저 탭을 닫을 경우 제거 된다.
• 로컬 스토리지와 달리 윈도우/탭 별로 생성된다.
• 동일한 윈도우/탭이라도 다른 도메인이라면 또 다른 세션 스토리지가 생성된다. 서로 독립적으로 동작한다.
• 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 일회성 로그인)

쿠키 (Cookie)

• 로컬 스토리지와 세션 스토리지 이전에 사용되던 저장소 이다.
• 서버와 클라이언트 간의 지속적인 교환을 위해 만들어 졌기 때문에 **웹사이트에서 쿠키를 설정하면 이후의 모든 웹 요청은 생성 될 때 마다 매번 서버에 전송 된다.** (크기가 클 경우 서버에 부담이 갈 수 있다.)
• 4KB까지 저장할 수 있는 용량 제한이 있다.
• 반 영구적으로 데이터 저장이 가능하다. 사용기간을 지정가능 하며 지정하게 되면 명시된 날짜에 삭제 되거나, 명시된 기간 이후에 삭제 된다. → 시간 제한 설정 가능!

IndexedDB

• localStorage보다 훨씬 더 많은 양의 데이터를 저장할 수 있다. 위의 스토리지들에 비해 코드가 복잡하다.
• 네트워크 가능여부에 상관 없이, 온라인과 오프라인 모두에서 동작할 수 있다.
• 많은 리소스를 저장할 때에 사용될 수 있다.

reference

https://it-eldorado.tistory.com/90

https://web.dev/storage-for-the-web/