웹 저장소 (Local storage vs Session storage vs Cookie) 차이점 비교 🔍

웹 브라우저에는 데이터를 저장할 수 있는 Local Storage, Session Storage, Cookies같은 저장 공간이 존재한다.

HTML5부터는 새로운 웹 저장소인 Web Storage(Local Storage & Session Storage) 개념이 추가되었다.

 

보통 변수에 데이터를 저장하면 새로고침하면 사라지지만, 브라우저 저장소를 활용하면 새로 고침을 해도 유지할 수 있다.

그럼 각 저장 방식의 차이점을 한 번 살펴보자! 🔍

---

1️⃣ Web Storage 🗃️

☑️ Local Storage (영구 저장소)

• 데이터를 브라우저에 영구적으로 저장할 수 있다.
• 브라우저를 종료해도 데이터가 유지된다.
• 단, 같은 도메인에서만 접근 가능하다.

☑️ Session Storage (임시 저장소)

• 데이터를 현재 탭(또는 창) 내에서만 임시로 저장한다.
• 브라우저 탭이나 창을 닫으면 데이터가 삭제된다.
• 같은 도메인이더라도 탭이 다르면 서로 데이터에 접근할 수 없다.

🔍 Web Storage vs Cookie 차이점

	Web Storage (Local/Session)	Cookies
서버 전송 여부	❌ 서버로 전송되지 않음	✅ 매 요청마다 자동으로 서버에 전송
저장 데이터 유형	문자열 외에도 객체 저장 가능	문자열 데이터만 저장 가능
저장 용량	크롬/파이어폭스: 10MB, 사파리: 5MB	사이트당 최대 4KB
유효 기간	Local Storage는 영구적, Session Storage는 브라우저 종료 시 삭제	만료 기간 지정 가능

---

2️⃣ Cookies 🍪

쿠키는 서버와 클라이언트 간에 데이터를 지속적으로 주고받기 위한 저장소이다.

서버에서 사용자의 웹 브라우저로 작은 데이터 조각을 전송하면, 브라우저는 이를 저장했다가 이후 Backend API 요청 시 자동으로 전송한다.

 

☑️ 쿠키의 주요 기능

• 세션 관리 → 로그인 정보, 접속 시간 등 유지

• 개인화 → 사용자 맞춤형 페이지 제공

• 트래킹 → 사용자 행동 및 패턴 분석

---

3️⃣ 저장 방식 비교

☑️ Web Storage (Local/Session)

// 데이터 저장
localStorage.setItem("user", "John");
sessionStorage.setItem("sessionData", "Temporary Info");

// 데이터 가져오기
localStorage.getItem("user"); // "John"
sessionStorage.getItem("sessionData"); // "Temporary Info"

// 데이터 삭제
localStorage.removeItem("user");
sessionStorage.removeItem("sessionData");

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

 

☑️ Cookie

// 쿠키 저장
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 쿠키 가져오기
const myCookie = document.cookie.split("; ").find(row => row.startsWith("username="));
const result = myCookie ? myCookie.split("=")[1] : "";
console.log(result); // "John"

---

4️⃣ 결론

• 자주 변경되는 데이터 → Session Storage (브라우저 종료 시 삭제)
• 장기 저장할 데이터 → Local Storage (브라우저 종료 후에도 유지)
• 서버와 자동으로 주고받아야 하는 데이터 → Cookies (로그인 토큰, 사용자 설정 등)