인터넷 기록을 삭제하기 위해 설정창에 가본 적이 있다면,
아마 대부분 다음과 같은 항목들을 보았을 것이다.
쿠키, 브라우저 저장소.. 도대체 어떤 것들을 의미하는지 알아보고자 글을 작성하게 되었다.

쿠키

인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말함.

4KB 정도의 작은 용량을 가지고 있으며, 키-값 쌍으로 구성된다

특징

• 키-값
• 매번 서버에 전송
• 4KB까지의 데이터를 저장
• 대부분의 브라우저가 지원

단점

보안에 취약함
=> 쿠키의 단점을 보완하기 위해 웹 스토리지 기술이 생김

웹 스토리지

데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능

세션 스토리지

특징

• 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장
• 메모리에 저장하기 때문에 브라우저가 종료되면 사라짐.
• 쿠키의 문제를 해결하기 위해 등장함
• 5MB까지 데이터 저장 가능(문자열만)

단점

• 서버의 리소스를 쓰기 때문에, 세션을 많이 쓰면 서버의 리소스를 많이 씀.
  => 이로 인해 유저 인증은 쿠키=> 세션=> 토큰의 역사를 거치게 됨.
  (현재는 주로 토큰 사용)
• 서버의 확장이 어려워짐

로컬 스토리지

특징

• 브라우저를 종료해도 데이터가 유지되며, 사용자가 따로 지우기 전까지 정보가 저장되어있다.
• 지속적으로 필요한 정보를 저장하기에 알맞음

단점

• HTML5부터 지원

IndexDB

사용자의 브라우저에 데이터를 지속적으로 저장하는 방법

특징

• Index 를 이용하여, 빠르게 검색할 수 있게 설계됨.
• javascript 가 이해하는 어떠한 값이라도 모두 저장할 수 있다.
• IndexedDB 는 용량 제한은 특별히 없으나, HDD 저장소 상태 나 브라우저의 상태에 따라서 달라 질 수 있다.
• 큰 데이터는 IndexedDB 를 통해 다루는 것이 좋다.

단점

IndexDB는 비동기로 동작한다.

캐시

캐시는 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치
과거 캐시된 로컬 사본이 존재한다면, 원 서버가 아닌 캐시에서부터 문서를 제공받게된다.

특징

사이즈가 큰 리소스를 저장하고 있기 때문에, 빠르게 웹페이지를 로딩할 수 있음.

• Image, HTML, CSS, JS를 저장

단점

유저 브라우저에서 캐시가 바뀌지 않아 예전 코드와 충돌하는 경우가 생김

요약

우선, 쿠키, 웹 스토리지는 모두 key-value 형태이며, 클라이언트에 저장된다는 특징이 있다.

• 쿠키(만료 기한이 있음)

  팝업 창에서 다시 보지 않음 클릭

• 로컬 스토리지(정보 영구 저장)

  자동 로그인

• 세션 스토리지(세션 종료시 정보 삭제)

  입력 폼 정보
  비로그인 장바구니

참고

• tristan91: https://tristan91.tistory.com/521
• velopert: https://velopert.com/2350
• kler: https://velog.io/@kler/TIL4-로컬스토리지-세션스토리지-쿠키-정리
• dorazi: ttps://velog.io/@dorazi/쿠키-웹-스토리지-로컬-스토리지-세션-스토리지
• jindev: https://jindev-t.tistory.com/107