[Javascript] 브라우저 저장소 차이(localStorage, SessionStorage, Cookie)

localStorage

• 영구적인 데이터 저장. 브라우저가 종료되거나 탭이 닫혀도 데이터가 유지됩니다.
• 보통 5MB 정도의 데이터를 저장할 수 있습니다(브라우저에 따라 다를 수 있음).
• 삭제되기 전까지 영구적으로 남아 있습니다.
• 같은 도메인 내 모든 페이지에서 접근 가능합니다.
• 클라이언트 측에서만 저장되므로 민감한 정보를 저장하는 데는 적합하지 않습니다.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 불러오기
const data = localStorage.getItem('key');

// 데이터 삭제
localStorage.removeItem('key');

// 모든 데이터 삭제
localStorage.clear();

sessionStorage

• 세션 동안만 데이터 저장. 탭이나 브라우저를 닫으면 데이터가 사라집니다.
• 보통 5MB 정도로, localStorage와 비슷한 용량을 가집니다.
• 브라우저 또는 탭이 종료되면 데이터가 삭제됩니다.
• 같은 탭 안에서만 접근 가능. 다른 탭이나 창에서 접근할 수 없습니다.
• 마찬가지로 클라이언트 측에서만 저장되며 민감한 정보를 저장하는 데 적합하지 않습니다.

// 데이터 저장
sessionStorage.setItem('key', 'value');

// 데이터 불러오기
const data = sessionStorage.getItem('key');

// 데이터 삭제
sessionStorage.removeItem('key');

// 모든 데이터 삭제
sessionStorage.clear();

Cookie

• 서버와 클라이언트 간의 데이터 교환을 위한 저장소. 주로 세션 유지, 로그인 상태 관리 등에서 사용됩니다.
• 한 쿠키당 최대 4KB. 총 쿠키 수는 제한적일 수 있습니다(도메인당 약 20~30개).
• 쿠키마다 만료 시간을 설정할 수 있습니다. 만료 시간이 지나면 쿠키는 자동으로 삭제됩니다.
• 같은 도메인 내 모든 페이지에서 접근 가능. HttpOnly 속성을 사용하면 클라이언트 측에서 접근할 수 없고, 서버에서만 쿠키에 접근할 수 있습니다.
• Secure 및 HttpOnly 속성으로 보안을 강화할 수 있으나, 기본적으로는 클라이언트 측에 저장되기 때문에 보안 이슈가 있을 수 있습니다.

// 쿠키 설정 (유효기간 7일)
document.cookie = "key=value; path=/; expires=" + new Date(Date.now() + 7 * 864e5).toUTCString();

// 쿠키 불러오기
const cookies = document.cookie;

// 쿠키 삭제
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

차이점

속성	localStorage	sessionStorage	Cookie
유지 시간	영구적	세션 동안만	만료 시간 설정 가능
저장 용량	약 5MB	약 5MB	한 쿠키당 4KB
범위	같은 도메인 내 모든 페이지	같은 탭에서만	같은 도메인 내 모든 페이지
서버 전송	서버로 전송되지 않음	서버로 전송되지 않음	HTTP 요청 시 자동 전송
사용 목적	클라이언트 측 데이터 저장	세션 데이터 저장	서버와 클라이언트 간 데이터 교환