**웹 스토리지(Web Storage)**는 과거 용량이 작고(4KB) 매 요청마다 서버로 전송되던 쿠키(Cookie)의 단점을 극복하고, 클라이언트 브라우저에 약 5MB 이상의 데이터를 저장하게 돕는 기능입니다.
1. LocalStorage vs SessionStorage
localStorage: 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 영구히 보관됨 (사용자가 직접 삭제 전까지 유지).sessionStorage: 해당 브라우저 탭(Tab)이 열려있는 동안에만 데이터가 유지되며 탭을 닫으면 자동 삭제.
// 1. LocalStorage 데이터 저장 (Key-Value)
localStorage.setItem('theme', 'dark');
// 2. LocalStorage 데이터 읽기
const currentTheme = localStorage.getItem('theme'); // 'dark'
// 3. LocalStorage 데이터 삭제
localStorage.removeItem('theme');
2. 객체/배열 저장 시 JSON 변환 필수
웹 스토리지는 오직 문자열(String)만 저장할 수 있으므로, 자바스크립트 객체나 배열을 저장할 때는 JSON.stringify()를 사용해야 합니다.
const userSettings = { volume: 80, autoplay: true };
// 저장할 때: 객체 -> JSON 문자열 변환
localStorage.setItem('settings', JSON.stringify(userSettings));
// 가져올 때: JSON 문자열 -> 객체 파싱
const saved = JSON.parse(localStorage.getItem('settings'));
console.log(saved.volume); // 80
3. 비디오/오디오 미디어 API 제어
자바스크립트로 HTML5 <video> 태그의 재생, 일시정지, 음량을 직접 제어할 수 있습니다.
const video = document.querySelector('video');
// 자바스크립트로 비디오 제어
video.play(); // 재생
video.pause(); // 일시정지
video.volume = 0.5; // 음량 50%
4. 자주 묻는 질문 (Q&A)
Q. 웹 스토리지에 사용자 비밀번호나 결제 정보를 저장해도 되나요? A. 절대로 안 됩니다! 웹 스토리지는 자바스크립트 코드에서 누구나 쉽게 접근해 읽을 수 있으므로, 민감한 개인정보나 보안 토큰을 저장해서는 안 되며, 테마 설정, 장바구니 임시 목록 데이터 등에 사용해야 합니다.