Web Storage(HTML5) 등장 전과 후

Storage (HTML5 표준) 등장 전 : 웹 브라우저 저장소는 유일하게 Cookie 만을 활용해야했다
Storage (HTML5 표준) 등장 후 : 웹 브라우저에서 아래 두 유즈케이스(Cookie와 Storage)를 제대로 나눠 활용할 수 있게 된다

1. Cookie

• 웹 서버와 클라이언트 간의 상태 정보를 주고받는 데 사용됩니다.
• 클라이언트에서 요청 시마다 자동으로 서버로 전달됩니다.
• 만료시간 설정 가능

1.1. 주요 활용

• 로그인 인증 정보, 사용자 식별 정보, 사이트 방문 기록 등

2. Storage (HTML5 표준)

• 클라이언트(웹 브라우저) 내부에 데이터를 저장하며, 서버와의 통신 없이도 데이터를 사용할 수 있습니다.
• 큰 정보를 브라우저에 저장하고 서버로 전송 안 함.
• 브라우저의 Application 탭에서 확인 가능.
• 만료 시간이 없거나 브러우저 세션 종료 시 삭제.

2.1. Storage의 종류:

• Local Storage: 브라우저가 종료되어도 데이터가 삭제되지 않음.
• Session Storage: 브라우저 탭을 닫으면 데이터가 삭제됨.

2.1.1. Local Storage

• 특징: 브라우저 창을 닫아도 데이터가 유지됩니다.
  용량 제한은 10MB 정도로 쿠키보다 더 많은 데이터를 저장할 수 있습니다.

• 활용 예시: 최근 로그인한 계정 정보 저장, 사용자 맞춤 설정(예: 테마, 언어 설정)

2.1.2. Session Storage

• 특징:
  브라우저 탭을 닫으면 데이터가 삭제됩니다.
  주로 임시 데이터를 저장하는 데 사용됩니다.

• 활용 예시: 장바구니 데이터, 특정 페이지에서만 사용되는 임시 데이터

2.2. 주요 활용:

유저가 변경한 옵션 상태 저장
최근 로그인한 계정 저장
길게 유지할 데이터(Local)와 임시 데이터(Session)를 구분하여 사용

3. Cookie와 Storage 비교

구분	Cookie	Storage
저장 용량	최대 4KB	최대 10MB
만료 시간	설정 가능	Local: 설정 불가능, Session: 브라우저 종료 시 삭제(임시저장)
서버 전송	요청마다 서버로 전송	서버로 전송되지 않음
범위	지정된 Domain과 Path에만 유효	Domain 내 모든 경로에서 유효
보안	Non-HTTPS 요청 시 탈취 가능	브라우저에서만 접근 가능
스크립트 접근	옵션으로 제한 가능(HTTPOnly 설정)	스크립트 접근 가능
브라우저 간 공유	불가능(Session으로 해결 가능)	불가능(Session으로 해결 가능)

4. Cookie와 Storage 사용 사례

데이터 유형	저장 위치	이유
로그인 인증 정보	Cookie	서버와의 요청마다 필요하며, 만료 시간을 설정 가능
최근 방문 페이지	Local Storage	브라우저 내에서만 필요하고 서버 전송 불필요
검색 기록	Local Storage	브라우저 내에서 활용하고 데이터 용량이 큼
장바구니 데이터	Session Storage	사용자가 브라우저를 닫으면 데이터를 삭제하도록 설정
유저가 변경한 옵션 상태	Local Storage	설정 값을 오랫동안 유지할 필요가 있음

5. Cookie와 Storage 활용의 핵심 요약

5.1 Cookie

• 웹 서버와 데이터를 주고받아야 할 때 사용.
  크기가 작아야 하고 민감한 정보는 암호화 필요.
  • 예) 로그인 정보, 세션 관리, 사용자 추적 데이터.

5.2 Storage:

• 브라우저 내에서 데이터만 관리할 때 사용.
  크고 복잡한 데이터를 저장하기 적합.
  • 예_ 사용자 설정, 최근 방문 기록, 임시 상태 데이터.