[웹 저장소] localStorage, sessionStorage, Cookie 의 차이와 사용법

728x90

localStorage, sessionStorage, Cookie 

웹 페이지에서 데이터를 저장해야 할 때 localStorage, sessionStorage, cookie 중 무엇을 선택해야 할지 고민되시나요? 이 세 가지는 저장 위치는 같지만, 수명, 용량, 사용 목적이 다릅니다.
이번 글에서는 각각의 차이점과 특징, 언제 어떤 걸 써야 하는지 실전 예제와 함께 정리합니다.

 

---

1.  localStorage, sessionStorage, Cookie 비교

항목	localStorage	sessionStorage	Cookie
저장 위치	브라우저	브라우저	브라우저
수명	브라우저에 영구 저장 (명시적 삭제 전까지)	브라우저 탭을 닫을 때까지	만료 시간 설정 가능
용량 제한	약 5~10MB	약 5~10MB	약 4KB
서버 전송	❌ 전송 안 됨	❌ 전송 안 됨	✅ 요청 시마다 자동 전송
접근 방식	JS에서 접근 가능	JS에서 접근 가능	JS & 서버 모두 가능
보안 설정	❌	❌	✅ (HttpOnly 등)
사용 예시	다크모드 설정, 장바구니 상태	로그인 직후 상태 유지	세션 유지, 인증 정보 등

 

---

2.  localStorage

특징

• 브라우저에 영구 저장
• 페이지를 새로고침하거나 브라우저를 꺼도 남아 있음
• 명시적으로 removeItem이나 clear 호출해야 삭제됨

사용 예제

// 저장
localStorage.setItem("theme", "dark");

// 불러오기
const theme = localStorage.getItem("theme");

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

언제 쓰나?

• 사용자 설정값 저장
• 즐겨찾기 리스트 등 장기적인 데이터
• 인증 토큰 저장 (주의 필요: XSS 위험)

 

---

3.  sessionStorage

특징

• 브라우저 탭 단위로 저장
• 탭을 닫으면 데이터도 사라짐
• 탭 간 공유되지 않음

사용 예제

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

// 불러오기
const step = sessionStorage.getItem("step");

언제 쓰나?

• 단일 세션 동안만 필요한 데이터 (예: 다단계 폼 상태)
• 임시 로그인 상태, 페이지 이동 간 데이터 유지

 

---

3.  Cookie

특징

• 작은 용량 (4KB 이하)
• 서버와 자동 전송됨 (document.cookie 또는 HTTP 헤더)
• 보안 설정 가능 (HttpOnly, Secure, SameSite)

사용 예제

// 저장 (브라우저에서)
document.cookie = "token=abc123; max-age=3600; path=/";

// 읽기
console.log(document.cookie);

언제 쓰나?

• 인증 정보 저장 (세션 쿠키)
• 서버에서 사용자 식별
• 로그인 유지

 

---

4.  언제 뭘 써야 할까?

목적	추천 저장소	이유
로그인 유지	✅ Cookie	서버와 함께 사용 가능, HttpOnly 설정 가능
장바구니, 설정 등 장기 상태	✅ localStorage	페이지 리로드/재접속 후에도 유지
임시 폼 데이터, 단일 세션	✅ sessionStorage	탭 닫으면 사라져야 하는 데이터에 적합

보안 관련 팁

• localStorage나 sessionStorage에 민감한 정보(토큰, 비밀번호 등) 저장하면 안됩니다.
  → 브라우저에서 JS로 접근 가능하므로 XSS에 취약
• 민감한 데이터는 가능하면 쿠키(HttpOnly, Secure) 로 저장하는 것이 좋습니다.

 

---

5.  마무리

함께 보면 좋은 자료

외부 사이트 : 

• MDN Web Doc - localStorage
• MDN Web Doc - sessionStorage
• MDN Web Doc - Cookie

 

---