로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점

공통점

• 클라이언트(브라우저) 측 저장소로서, 서버의 부하를 줄이는 데 기여합니다.
• 웹페이지의 로딩 속도 향상: 불필요한 서버 요청을 줄여 웹사이트 응답 속도를 높일 수 있습니다.
• 사용자 경험 개선: 사용자 설정(예: 테마 색상, 글꼴 크기 등)이나 로그인 상태 유지 등 개인화된 기능 구현에 활용됩니다.
• 동일 출처(Origin) 정책을 따름: 보안 상의 이유로 다른 도메인에서는 접근 불가합니다.

차이점

항목	쿠키	로컬스토리지	세션스토리지
최대 저장 용량	약 4KB	약 5MB	약 5MB
HTML 지원 버전	HTML4 / HTML5	HTML5	HTML5
접근 범위	동일 Origin (모든 탭/창)	동일 Origin (모든 탭/창)	탭/창 하나 (세션 단위)
만료 기한	수동 설정 (날짜 지정 가능)	명시적 삭제 전까지 유지	탭/창을 닫으면 삭제됨
설정 주체	클라이언트 + 서버	클라이언트	클라이언트
서버 요청 시 자동 전송	O (HTTP 헤더에 포함됨)	X	X
보안 고려	XSS, CSRF 모두 주의 필요	XSS 주의 필요	XSS 주의 필요

• 쿠키는 HTTP 요청 시마다 자동으로 서버에 전송되므로, 민감한 정보 저장 시 주의가 필요하며 전송 비용이 발생합니다.
• 로컬스토리지는 영구적 저장소이므로, 명시적으로 삭제하지 않는 이상 브라우저에 남아있습니다.
• 세션스토리지는 탭 단위로 동작하므로, 새로고침해도 유지되지만 탭을 닫으면 소멸됩니다.
• 보안 측면에서는 세 가지 모두 **XSS(스크립트 삽입 공격)**에 취약할 수 있으며, 쿠키는 **CSRF(사이트 간 요청 위조)**에도 노출될 수 있습니다.