브라우저 저장소 정리: localStorage vs sessionStorage vs cookie

웹 애플리케이션은 사용자 상태를 유지하거나 설정 값을 저장하기 위해 클라이언트 측 저장소를 활용합니다. 대표적인 저장소로는 localStorage, sessionStorage, 그리고 cookie가 있으며, 각각의 특성과 용도에 따라 적절히 사용해야 성능과 보안 측면에서 이점을 얻을 수 있습니다.

---

✅ 저장소 간 비교 요약

구분	localStorage	sessionStorage	cookie
저장 위치	브라우저	브라우저	브라우저 + 요청 시 서버 전송
만료 시점	수동 삭제 시까지 영구 저장	탭(세션) 종료 시 삭제	설정된 만료 시간 또는 세션 종료
용량 제한	약 5MB	약 5MB	약 4KB
서버 전송 여부	❌ 전송 안됨	❌ 전송 안됨	✅ 매 요청마다 함께 전송
접근 방식	JavaScript	JavaScript	JavaScript + HTTP
보안 수준	중 (암호화 직접 구현 필요)	중	낮음 (XSS/CSRF에 취약)

---

📦 localStorage 예제

// 저장
localStorage.setItem("user", "Alice");

// 읽기
const name = localStorage.getItem("user");
console.log(name); // "Alice"

// 삭제
localStorage.removeItem("user");

• 브라우저를 닫아도 유지되므로, 장기 저장에 적합합니다.
• 로그인 상태 유지, 다크모드 설정 등에 유용

---

📦 sessionStorage 예제

// 저장
sessionStorage.setItem("step", "1");

// 읽기
const step = sessionStorage.getItem("step");
console.log(step); // "1"

• 브라우저 탭이 닫히면 삭제되므로, 임시 정보 저장에 유용합니다.
• 회원가입 단계 진행 정보, 임시 폼 데이터 등에 적합

---

📦 cookie 예제

// 생성 (JavaScript)
document.cookie = "token=abc123; path=/; max-age=3600";

// 읽기
console.log(document.cookie); // "token=abc123"

• HTTP 요청 시 자동으로 서버로 전송되기 때문에 인증 정보나 트래킹에 사용됩니다.
• 용량이 작고 보안에 취약하므로, 민감 정보는 반드시 암호화 필요

---

🔐 보안 주의사항

• 민감한 정보는 저장하지 않거나 반드시 암호화 처리할 것
• cookie는 XSS/CSRF에 특히 주의해야 하며, HttpOnly, Secure, SameSite 설정 권장

---

✨ 결론

• 장기 설정 저장: localStorage
• 임시 상태 저장: sessionStorage
• 서버와 함께 관리해야 하는 정보: cookie

각 저장소의 특성과 만료 조건, 보안 고려 사항을 잘 이해하고 적절히 활용하면 사용자 경험을 높이고 애플리케이션의 신뢰성도 향상시킬 수 있습니다.