localStorage & sessionStorage – 브라우저 데이터 저장 완벽 가이드

 

 

안녕하세요 😊
웹 개발에서 사용자의 데이터를 브라우저에 저장하는 기능은 매우 유용합니다.
로그인 상태 유지, 장바구니 저장, 사용자 환경 설정 등이 대표적인 예입니다.

이때 웹 스토리지(Web Storage) API인 localStorage와 sessionStorage를 사용하면
간단하게 데이터를 저장하고 불러올 수 있습니다.

---

📍 1. localStorage vs sessionStorage 차이

특징	localStorage	sessionStorage
저장 기간	브라우저를 닫아도 유지	브라우저 탭을 닫으면 삭제
저장 범위	모든 탭·창에서 공유	현재 탭에서만 유지
용량	약 5~10MB	약 5~10MB
데이터 형식	문자열만 저장 가능	문자열만 저장 가능

 

---

📍 2. 기본 사용법

// 저장
localStorage.setItem("username", "홍길동");
sessionStorage.setItem("theme", "dark");

// 가져오기
console.log(localStorage.getItem("username")); // "홍길동"
console.log(sessionStorage.getItem("theme")); // "dark"

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

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

---

📍 3. 객체 저장하기

웹 스토리지는 문자열만 저장 가능하므로 JSON 변환 필요

const user = { name: "홍길동", age: 30 };

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

// 불러오기
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 홍길동

---

📍 4. 실무 활용 예시 – 다크 모드 저장

// 다크 모드 토글
function toggleDarkMode() {
  document.body.classList.toggle("dark");
  const mode = document.body.classList.contains("dark") ? "dark" : "light";
  localStorage.setItem("theme", mode);
}

// 페이지 로드 시 적용
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark");
}

 

📌 사용자가 설정한 모드를 브라우저에 저장해 다음 방문에도 유지

---

📍 5. 사용 시 주의사항

• 저장 용량 제한 있음(대략 5~10MB)
• 민감한 정보(비밀번호, 토큰)는 저장 금지 → 보안 취약
• 서버와 동기화가 필요하면 IndexedDB나 서버 저장을 고려

---

✅ 마무리

localStorage와 sessionStorage는 간단한 데이터 저장에 강력한 도구입니다.
특히 사용자 환경 설정, 임시 데이터 저장 등에 활용하면 UX를 크게 개선할 수 있습니다.
다만 보안에 민감한 데이터는 절대 저장하지 마세요. 🚫