웹 프로젝트 기초집LESSON 15

localStorage: 테마와 UI 선택 상태를 브라우저에 저장하기

난이도초급

예상 시간45분

선수지식14강 문의 폼 검증

15강. localStorage: 테마와 UI 선택 상태를 브라우저에 저장하기

1. 이번 강의에서 해결할 문제

다크 테마를 선택해도 새로 고치면 초기 상태로 돌아갑니다. 민감하지 않은 UI 선택만 localStorage에 저장하고 실패해도 사이트가 동작하게 만듭니다.

2. 학습 목표

3. 핵심 개념

localStorage는 같은 출처에서 브라우저를 닫은 뒤에도 남는 문자열 저장소입니다. 사용자가 삭제할 수 있고 사생활 보호 모드나 정책에서 지속되지 않을 수 있으므로 필수 데이터 저장소가 아닙니다. 페이지 JavaScript가 읽을 수 있으므로 민감 정보, API Key, 비밀번호, 토큰과 개인정보를 넣지 않습니다.

4. 단계별 실습

HTML · 헤더에 추가

game-dev-portfolio/index.html
<button id="themeButton" type="button" aria-pressed="false">어두운 테마 사용</button>

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css
:root[data-theme="dark"] {
  --color-bg: #101722;
  --color-surface: #182235;
  --color-text: #edf2f4;
  --color-muted: #bdc8d4;
  --color-border: #33445b;
}

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js
const themeButton = document.querySelector('#themeButton');

function applyTheme(theme) {
  const dark = theme === 'dark';
  document.documentElement.dataset.theme = dark ? 'dark' : 'light';
  themeButton.setAttribute('aria-pressed', String(dark));
  themeButton.textContent = dark ? '밝은 테마 사용' : '어두운 테마 사용';
}

let savedTheme = 'light';
try { savedTheme = localStorage.getItem('portfolio-theme') ?? 'light'; } catch {}
applyTheme(savedTheme);

themeButton.addEventListener('click', () => {
  const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
  applyTheme(next);
  try { localStorage.setItem('portfolio-theme', next); } catch {}
});

개발자 도구 확인: Application → Local Storage에서 portfolio-theme 값이 바뀌는지 보고 새로 고침 뒤 복원되는지 확인합니다. 항목을 삭제하면 기본 밝은 테마여야 합니다.

5. 코드가 동작하는 이유

저장소에는 작은 문자열 상태만 넣고 실제 스타일은 루트의 data-theme에 따라 CSS 변수가 결정합니다. 저장소 접근 실패를 잡아도 메모리 상태와 버튼은 계속 작동합니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ