[Javascript] Cookie, localStorage, sessionStorage

쿠키와, 로컬스토리지, 세션스토리지

세개 모두 웹 브라우저에서 데이터를 저장하는 기술로 각각의 목적과 사용 방식이 다릅니다.

Cookie

• 클라이언트와 서버 간의 통신에 이용되는 정보
  • 사용자 정보, 특정 값 등등
• http 요청 시 Header에 담아서 보냄
• 쿠키정책을 서버, 클라이언트 모두 설정 가능 (단 클라이언트에서 설정 시 제한적)
• 설정된 만료 시간에 따라 쿠키 유지 기간을 제어할 수 있음

이용 예시

• 자동 로그인
• 팝업 등 이벤트 성 UI 비노출 기간을 설정 가능
• 다크모드, 언어 등 사용자 설정을 저장

보안 및 주의사항

XSS(Cross-site Scripting) 악성 스크립트가 브라우저에서 실행되어 쿠키 데이터 읽기 가능하거나 인증 토큰이나 세션 쿠키 탈취 가능하다. 해당 기능에 대해 대처하기 위해 HttpOnly속성을 사용하여 자바스크립트에서 쿠키에 접근하지 못하도록 설정하고 쿠키가 동일 사이트에서만 전송 되도록 SameSite=Strict를 하거나 Secure 설정을 통해 모든 통신을 암호화 한다.

localStrorage

• 브라우저의 로컬에 데이터를 영구적으로 저장 (만료기간이 없고 사용자가 삭제하지 않는 한 유지)
• 브라우저 탭간 공유 가능

sessionStorage

• 브라우저의 세션(탭) 동안만 유지
• 탭을 닫거나 새로 열면 데이터가 삭제
• 서버와의 요청에 포함되지 않음 (필요 시 별도의 header에 담아 전송)

이용 예시

• 페이지를 새로 고침 시에도 유지해야하는 데이터
• 특정 값을 저장

보안 및 주의사항

웹스토리지는 자바스크립트를 통해 접근이 가능하므로 가급적이면 민간한 데이터를 넣지 않는게 좋으며 데이터를 저장하더라도 암호화해서 사용하는게 좋습니다.