웹 데이터 저장의 모든 것: 브라우저 세션 관리 쉽게 배우기 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 브라우저 세션 관리에 대해 함께 알아보려고 해요. localStorage, sessionStorage, 그리고 cookies는 웹 개발자라면 한 번쯤 마주치는 기능들인데요. 이 세 가지를 이해하면 사용자 데이터를 효율적으로 관리하고, 더 나은 사용자 경험을 제공할 수 있답니다. 😊

---

📌 브라우저 세션 관리란?

브라우저 세션 관리는 사용자의 데이터와 상태를 브라우저에 저장하는 방법이에요. 예를 들어, 쇼핑몰에서 장바구니에 물건을 담았는데 페이지를 새로 고침했을 때 사라지면 불편하겠죠? 이런 상황을 막기 위해 localStorage, sessionStorage, cookies가 활용됩니다.

---

🏠 localStorage: 장기 보관용 창고

localStorage는 브라우저에 데이터를 영구적으로 저장하는 공간이에요.

💡 특징:

• 데이터 유효기간: 명시적으로 삭제하기 전까지 유지
• 저장 용량: 약 5~10MB
• 문자열(String) 형식으로 저장

예시 코드:

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

// 데이터 읽기
const username = localStorage.getItem('username');
console.log(username); // "CodeCaine"

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

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

👉 사용 사례: 로그인 상태 유지, 장바구니 정보 저장 등

---

🚪 sessionStorage: 방문 동안만 열리는 방

sessionStorage는 브라우저 탭(session)에서만 데이터를 유지합니다.

💡 특징:

• 데이터 유효기간: 브라우저 탭을 닫으면 삭제
• 저장 용량: 약 5~10MB
• 문자열(String) 형식으로 저장

예시 코드:

// 데이터 저장
sessionStorage.setItem('tempData', 'Temporary');

// 데이터 읽기
const tempData = sessionStorage.getItem('tempData');
console.log(tempData); // "Temporary"

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

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

👉 사용 사례: 페이지 전환 간 임시 데이터 저장, 폼 데이터 유지 등

---

🍪 cookies: 작은 쪽지

cookies는 데이터를 서버와 클라이언트 간에 주고받는 방식이에요. HTTP 요청마다 서버로 전송되기 때문에 다른 두 저장 방식과는 조금 다릅니다.

💡 특징:

• 데이터 유효기간: 만료 날짜를 설정 가능 (설정하지 않으면 세션 단위로 유지)
• 저장 용량: 약 4KB
• 보안 옵션: Secure, HttpOnly 등

예시 코드:

// 데이터 저장
document.cookie = "username=CodeCaine; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 데이터 읽기
console.log(document.cookie); // "username=CodeCaine"

// 쿠키 삭제
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

👉 사용 사례: 사용자 인증 정보 저장, 언어 설정 유지 등

---

📊 세 가지 방식 비교

특징	localStorage	sessionStorage	cookies
유효기간	영구적	브라우저 탭 종료 시	설정에 따라 다름
저장 용량	5~10MB	5~10MB	약 4KB
데이터 전송 여부	X (클라이언트 저장만)	X (클라이언트 저장만)	O (서버로 자동 전송)
사용법	간단함	간단함	복잡함

---

🚀 실제 사용 시 팁!

• localStorage: 앱에서 데이터를 장기적으로 저장하고 싶을 때.
• sessionStorage: 사용자가 특정 페이지에서만 필요한 데이터를 임시로 저장할 때.
• cookies: 서버와 클라이언트 간 데이터 교환이 필요한 경우 (e.g., 인증 토큰).

---

🛠️ 실전 예제: 쇼핑몰 장바구니 데이터 저장

// 장바구니에 상품 추가
function addToCart(product) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 장바구니 출력
function displayCart() {
    const cart = JSON.parse(localStorage.getItem('cart')) || [];
    console.log("Cart:", cart);
}

// 사용 예시
addToCart({ id: 1, name: 'Laptop', price: 1500 });
addToCart({ id: 2, name: 'Mouse', price: 50 });
displayCart();

---

😊 마무리하며..

localStorage, sessionStorage, 그리고 cookies는 각자의 역할이 뚜렷하고, 사용 목적에 따라 적절히 선택해야 해요. 💡 이 세 가지를 잘 활용하면 사용자 경험을 더 풍부하게 만들 수 있답니다!

코드카인과 함께라면 언제나 성장할 수 있어요! 여러분의 프로젝트에 조금이라도 도움이 되었길 바라요. 궁금한 점은 언제든 물어봐 주세요! 😊