글을 시작하며

웹 개발을 하다 보면 브라우저에 데이터를 저장해야 하는 상황이 자주 발생합니다. 사용자의 설정값, 로그인 상태 등 다양한 데이터를 클라이언트 측에 저장하고 관리해야 합니다. 브라우저는 이를 위해 세 가지 주요 저장소를 제공합니다.

이번 글에서는 각각의 저장소가 가진 특징과 차이점을 알아보고, 어떤 상황에서 어떤 저장소를 선택해야 할지 정리해보고자 합니다.

로컬 스토리지(LocalStorage)

• 브라우저에 데이터를 영구적으로 저장 할 수 있음
• 페이지를 닫거나 브라우저를 종료해도 데이터가 유지됨
• 같은 도메인이라면 새 창이더라도 동일한 데이터를 공유
• 용량 제한: 약 5MB (브라우저마다 다름)

세션 스토리지(SessionStorage)

• 브라우저 탭/창이 열려있는 동안만 데이터 유지
• 탭/창을 닫거나 새로고침하면 데이터가 사라짐
• 탭간 데이터 공유 불가능
• 용량 제한: 약 5MB (브라우저마다 다름)

쿠키(Cookies)

• 클라이언트 로컬에 저장되는 작은 텍스트 파일
• 서버와 클라이언트 간 데이터를 주고 받을 수 있음
• 만료 기간 설정 가능함
• HTTP 요청 시 헤더에 자동으로 포함
• 용량 제한: 약 4KB

쿠키의 생성과 전송

1. 클라이언트가 document.cookie 를 사용해 쿠키를 설정하거나, 서버가 HTTP 응답 헤더 Set-Cookie 를 사용해 쿠키를 설정합니다.
2. 이후 브라우저는 HTTP 요청 시 도메인이 일치하는 모든 쿠키를 자동으로 포함시킵니다.
3. 서버는 쿠키 값을 읽고 사용자 인증 등의 처리를 수행할 수 있습니다.

쿠키의 속성

• domain: 쿠키를 적용할 도메인을 설정합니다. 하위 도메인에서도 쿠키를 사용할 수 있도록 domain=example.com 과 같이 설정할 수 있습니다.
• path: 쿠키가 유효한 경로를 설정합니다. 특정 경로에서만 쿠키가 전송되도록 할 수 있습니다.
• expires/max-age: 쿠키의 만료 시간을 설정합니다.
• secure: HTTPS 프로토콜에서만 쿠키가 전송되도록 설정합니다.
• HttpOnly: JavaScript에서 쿠키에 접근할 수 없도록 설정하여 보안을 강화합니다. (XSS 공격 방지)
• SameSite: 다른 사이트에서 쿠키를 전송할 수 있는지 여부를 설정합니다. (Strict, Lax, None) (CSRF 공격 방지)

withCredentials는 크로스 도메인 요청에서 쿠키나 인증 헤더를 전송할 수 있게 해주는 설정

차이점 정리

항목	로컬 스토리지	세션 스토리지	쿠키
데이터 유지 기간	영구적	브라우저 탭 종료 시 삭제	만료 기간 설정 가능
용량 제한	약 5MB	약 5MB	약 4KB
서버 전송	❌	❌	✅
접근 범위	도메인 전체	탭/창별	도메인 전체
주요 사용 목적	장기적인 데이터 저장	일회성 데이터 저장	인증 정보 저장

• 로컬 스토리지: 장기적으로 유지해야 하는 데이터 (예: 사용자 설정, 다크 모드 여부 등)
• 세션 스토리지: 페이지를 닫으면 사라져야 하는 데이터 (예: 일시적인 폼 입력값, 임시 상태)
• 쿠키: 서버와 데이터를 주고받아야 하는 경우 (예: 로그인 정보, 인증 토큰)

결론

로컬 스토리지, 세션 스토리지, 쿠키는 각각의 특성과 용도가 다릅니다. 데이터 보존 기간, 보안 등을 고려하여 적합한 방법을 선택해야합니다.

로컬 스토리지는 장기적인 데이터 저장용, 세션 스토리지는 일회성 데이터 저장용, 쿠키는 서버와 연동이 필요하며 보안이 중요한 경우에 활용할 수 있습니다.

애플리케이션의 요구사항과 보안 등을 고려하여 적절한 저장 방식을 선택해보세요! 🚀