Web Storage

클라이언트 사이드 데이터 저장소

Web Storage API는 브라우저 내에 키-값(Key-Value) 쌍으로 데이터를 안전하게 저장할 수 있는 매커니즘을 제공합니다. 기존의 쿠키(Cookie)보다 저장 용량이 훨씬 크고(약 5MB), 매 서버 요청마다 헤더에 포함되어 전송되지 않으므로 네트워크 성능 측면에서도 유리합니다.

Web Storage는 두 가지 형태로 제공됩니다:

기능/특징	설명
localStorage	브라우저를 닫아도 데이터가 영구적으로 보존됩니다. (다크모드 설정, 자동 로그인 토큰 등에 사용)
sessionStorage	탭 또는 브라우저 창이 닫히면 데이터가 지워집니다. (일회성 폼 데이터, 현재 세션 정보에 사용)

// LocalStorage를 활용한 테마 설정 저장 예제

// 데이터 저장하기
localStorage.setItem('minstudio_theme', 'dark');

// 데이터 불러오기
const currentTheme = localStorage.getItem('minstudio_theme');
console.log("현재 테마:", currentTheme);

// 객체 데이터 저장하기 (JSON 변환 필요)
const userConfig = { fontSize: 16, showSidebar: true };
localStorage.setItem('user_config', JSON.stringify(userConfig));

// 객체 데이터 불러오기
const savedConfig = JSON.parse(localStorage.getItem('user_config'));
console.log("설정된 폰트 크기:", savedConfig.fontSize);

// 특정 데이터 삭제 및 전체 초기화
// localStorage.removeItem('minstudio_theme');
// localStorage.clear();