질문

로컬스토리지, 세션스토리지, 쿠키의 차이를 설명해보세요.

학습 log

3/26

답변

세가지의 공통점은 브라우저에서 클라이언트 사이드에 저장되는 데이터입니다.
로컬 스토리지는 사용자가 지울때까지는 지워지지 않습니다. 브라우저를 닫아도 데이터가 계속 남아 있습니다.

세션 스토리지는 사용자가 접속한 세션 동안만 유지되어 창을 닫으면 지워집니다.
보통 세션을 구분하기 위한 세션ID를 할당해서 저장하는 용도로 사용됩니다. 브라우저에는 세션id만 저장하고 구체적인 데이터는 서버에 저장하는 식으로요.

쿠키는 로컬스토리지에 비해 용량이 작습니다. 브라우저를 닫아도 데이터가 지워지지 않지만 만료기한이 정해져있어 만료기한 이후에 삭제되는 방식입니다. 서버 요청시 쿠키가 함께 전송되기 때문에 보안에 주의해야 합니다.

더 궁금한 점: 구체적인 활용 용도, 보안에 주의해야 할 부분, JS, React, Next.js에서 어떻게 처리하는지?

AI 피드백

답변에서 웹 스토리지와 쿠키의 주요 차이점을 잘 설명해주셨습니다.
몇 가지 보완할 점을 제안드립니다:

1. 용량 제한에 대해 구체적인 수치를 언급하면 좋을 것 같습니다.
   - 쿠키: 4KB
   - 로컬/세션 스토리지: 5~10MB (브라우저마다 다름)

2. 쿠키의 보안 관련 내용을 좀 더 구체적으로 설명하면 좋겠습니다.
   - HttpOnly 플래그로 XSS 공격 방지 가능
   - Secure 플래그로 HTTPS 통신에서만 전송되도록 설정 가능
   - SameSite 속성으로 CSRF 공격 방지 가능

3. 실제 활용 사례를 추가하면 이해하기 좋을 것 같습니다.
   - 로컬 스토리지: 사용자 설정, 테마 등 영구 보관 데이터
   - 세션 스토리지: 임시 폼 데이터, 장바구니 등 휘발성 데이터
   - 쿠키: 로그인 토큰, 사용자 식별자 등

4. React/Next.js에서의 사용법도 코드 예시와 함께 추가하면 좋겠습니다.

이런 내용들을 보완하시면 더 완성도 높은 답변이 될 것 같습니다.