[HTML] Cookie vs. localStorage vs. sessionStorage

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다.

Summary

	Cookie	localStorage	sessionStorage
value 타입	문자열	문자열	문자열
동일 출처 정책(SOP)에 따르는가(=다른 도메인에서 접근 불가한가)	O	O	O
생성자	클라이언트/서버	클라이언트	클라이언트
만료	설정 여부에 따름	명시적으로 지울 때까지	탭 / 윈도우 닫을 때까지
모든 HTTP 요청과 함께 서버로 보냄	Cookie 헤더를 통해 자동 전송	X	X
용량(도메인당)	4KB(작음)	5MB / 10MB(큼)	5MB(중간)
서버와의 통신	O	X	X
취약점	XSS / CSRF 공격	XSS 공격	XSS 공격

---

모두 클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로 value는 반드시 문자열 이어야 한다. 또한 모두 동일 출처 정책(SOP) 을 따르기 때문에 다른 도메인에서 접근할 수 없다.

	Cookie	localStorage	sessionStorage
생성자	클라이언트/서버	클라이언트	클라이언트
만료	설정 여부에 따름	명시적으로 지울 때까지	탭 / 윈도우 닫을 때까지
모든 HTTP 요청과 함께 서버로 보냄	Cookie 헤더를 통해 자동 전송	X	X
용량(도메인당)	4KB(작음)	5MB / 10MB(큼)	5MB(중간)
서버와의 통신	O	X	X
취약점	XSS / CSRF 공격	XSS 공격	XSS 공격

참고

• What is the difference between localStorage, sessionStorage, session and cookies?
• 프론트엔드 인터뷰 핸드북, cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요
• Local Storage vs Cookies