HTML.HTTP와 쿠키, 웹 스토리지

📦 웹 데이터 저장소의 진화: 쿠키와 웹 스토리지

안녕하세요! 오늘은 로그인 유지, 장바구니 정보 유지와 같은 웹 사용자 경험의 핵심 기술인 쿠키(Cookie)와 HTML5 웹 스토리지(Web Storage)에 대해 알아보겠습니다.

---

1. HTTP와 저장소의 문제

웹의 기본 통신 프로토콜 HTTP는 비연결 지향(Stateless)입니다. 즉, 서버는 사용자의 이전 요청을 기억하지 못합니다. 이로 인해 로그인 상태 유지, 장바구니 유지 등에 문제가 생겼고, 이를 해결하기 위해 저장 기술이 발전했습니다.

🔎 Stateless란?
서버가 클라이언트의 이전 상태를 기억하지 않는 통신 방식입니다.

---

2. 쿠키(Cookie): 초기 웹 저장소

쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 파일입니다. 서버가 사용자에게 특정 데이터를 저장하도록 요청하며, 재접속 시 서버로 자동 전송되어 세션 유지, 사용자 식별 등에 활용됩니다.

✅ 쿠키 설정 예시

document.cookie = "username=kim; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

✅ 쿠키 읽기 함수 예시

function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i].trim();
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
  }
  return null;
}

---

3. HTML5 웹 스토리지

웹 스토리지(Web Storage)는 쿠키보다 많은 데이터를 저장할 수 있고, 서버로 전송되지 않으며, 간편한 API를 제공합니다.

📌 종류별 특징

• SessionStorage: 현재 세션(탭) 동안만 유지, 탭을 닫으면 사라짐
• LocalStorage: 브라우저에 영구 저장됨 (명시적 삭제 전까지 유지)

✅ 로컬 스토리지 사용 예시

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

// 가져오기
let name = localStorage.getItem("username"); // "Alice"

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

// 전체 삭제
localStorage.clear();

🌀 storage 이벤트로 탭 간 동기화

window.addEventListener("storage", function(e) {
  console.log("변경된 키:", e.key);
  console.log("이전 값:", e.oldValue);
  console.log("새 값:", e.newValue);
});

---

4. 마무리

쿠키는 소량의 데이터를 세션 유지에, 웹 스토리지는 대용량 데이터를 로컬에 효율적으로 저장할 수 있게 해줍니다. 각각의 특성을 잘 이해하고 적절하게 활용한다면, 보다 쾌적하고 똑똑한 웹 서비스를 만들 수 있습니다.

🎯 꿀팁:

• 쿠키: 로그인 상태 유지, 사용자 추적에 활용
• SessionStorage: 현재 탭에만 유효한 데이터 저장
• LocalStorage: 사용자 설정, 자동 로그인 등 장기 데이터 저장

🎉 웹 개발을 배운다면 꼭 익혀야 할 데이터 저장소 기술, 오늘 정리한 내용으로 완벽히 마스터해보세요!

---

✔ 본 글이 도움이 되셨다면 댓글과 공감 부탁드려요 😊