[HTML] LocalStorage 와 SessionStorage

WebStorage(웹 스토리지)란?

Web Storage(웹 스토리지) 는 브라우저에 데이터를 저장하는 방법 중 하나로, 클라이언트 측에서 데이터를 영구적 또는 일시적으로 저장할 수 있도록 합니다. 대표적으로 LocalStorage와 SessionStorage가 있으며, 기존의 쿠키(Cookie)보다 더 많은 데이터를 저장할 수 있고 보안적으로도 안전합니다.

LocalStorage

LocalStorage는 사용자가 데이터를 삭제하지 않는 한 브라우저에 영구적으로 저장됩니다. 즉, 페이지를 닫거나 브라우저를 종료해도 데이터가 유지됩니다.

// LocalStorage 데이터 저장
localStorage.setItem('username', 'JohnDoe');

// 데이터 가져오기
const user = localStorage.getItem('username');
console.log(user); // JohnDoe

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

---

SessionStorage

SessionStorage는 사용자가 페이지를 닫거나 브라우저를 종료하면 데이터가 자동으로 삭제됩니다. 즉, 세션이 유지되는 동안만 데이터를 저장합니다.

// SessionStorage 데이터 저장
sessionStorage.setItem('sessionData', 'Temporary Info');

// 데이터 가져오기
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // Temporary Info

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

---

쿠키(Cookie)란?

쿠키는 웹 사이트가 사용자의 브라우저에 저장하는 작은 데이터 파일입니다. 주로 사용자 인증, 세션 유지, 광고 추적 등에 사용됩니다.

// 쿠키 저장 (유효기간 설정)
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 쿠키 가져오기
console.log(document.cookie);

LocalStorage, SessionStorage, 쿠키 비교

항목	LocalStorage	SessionStorage	Cookie(쿠키)
데이터 유지 기간	영구적	세션 종료 시 삭제	설정된 만료일에 따라 다름
저장 용량	최대 5MB	최대 5MB	약 4KB
서버 전송	전송되지 않음	전송되지 않음	매 요청마다 서버로 전송됨
보안	JavaScript에서 접근 가능 (XSS 공격 주의)	JavaScript에서 접근 가능 (XSS 공격 주의)	보안 취약 (HTTPOnly 옵션 사용 가능)

---

결론

LocalStorage와 SessionStorage는 쿠키보다 더 많은 데이터를 저장할 수 있고, HTTP 요청 시 불필요한 데이터 전송을 방지할 수 있는 장점이 있습니다. 그러나 XSS 공격에 취약할 수 있으므로 민감한 정보는 저장하지 않는 것이 좋습니다. 쿠키는 서버와의 통신이 필요한 경우 유용하지만, 데이터 용량이 작고 보안 취약점이 존재하므로 사용 시 주의해야 합니다.