💾

브라우저 API

심화 · 선수: 21_Fetch와_JSON

22. 저장소 (localStorage / sessionStorage / 쿠키)

도메인별로 영구 저장됩니다. 명시적으로 지우기 전까지 남습니다.

localStoragesessionStorage쿠키

소요 시간

⏱ 약 1시간

난이도

📊 중급

선수 조건

🎯 단원 21

결과물

도메인별로 영구 저장됩니다. 명시적으로 지우기 전까지 남습니다.

이 강의에서 배우는 것

1브라우저 저장소 3가지의 차이를 안다.
2localStorage / sessionStorage API를 사용할 수 있다.
3쿠키의 개념과 용도를 이해한다.
4상황에 맞는 저장소를 선택할 수 있다.

소개

도메인별로 영구 저장됩니다. 명시적으로 지우기 전까지 남습니다.

핵심 개념

1. localStorage

도메인별로 영구 저장됩니다. 명시적으로 지우기 전까지 남습니다.

javascript

localStorage.setItem('username', '홍길동');
const name = localStorage.getItem('username');
localStorage.removeItem('username');
localStorage.clear();

값은 **문자열만** 저장됩니다. 객체는 `JSON.stringify`로 변환해 저장합니다.

2. sessionStorage

탭이 닫히면 사라집니다. API는 localStorage와 동일합니다.

javascript

sessionStorage.setItem('cart', JSON.stringify([1, 2, 3]));

3. 쿠키 (개요)

서버와 자동으로 주고받는 작은 텍스트.
인증 토큰, 세션 식별자 등에 사용.
용량 4KB로 작음. 모든 요청에 자동 첨부 → 트래픽 증가 주의.
브라우저에서는 `document.cookie`로 접근하지만 권장되지 않음. 서버에서 `Set-Cookie` 헤더로 설정하는 게 일반적.

4. 비교

항목	localStorage	sessionStorage	쿠키
수명	영구	탭 닫을 때까지	만료일 설정
용량	약 5~10MB	약 5~10MB	약 4KB
서버 전송	X	X	자동
용도	환경설정, 캐시	임시 상태	인증

핵심 예제

파일	다루는 내용
01_localstorage.js	localStorage 기본
02_sessionstorage.js	sessionStorage 기본
03_cookie_overview.js	쿠키 읽기 예시
04_comparison.js	세 저장소 비교

각 파일은 브라우저 콘솔이나 빈 HTML의 `<script>`에 붙여 실행하세요.

src/01_localstorage.js

javascript

/**
 * localStorage 기본 — 브라우저 콘솔에서 실행
 */
localStorage.setItem('username', '홍길동');
console.log(localStorage.getItem('username'));

const user = { id: 1, name: '이순신' };
localStorage.setItem('user', JSON.stringify(user));
const restored = JSON.parse(localStorage.getItem('user'));
console.log(restored.name);

localStorage.removeItem('username');
// localStorage.clear();  // 전체 삭제

src/02_sessionstorage.js

javascript

/**
 * sessionStorage — 탭이 닫히면 사라짐
 */
sessionStorage.setItem('step', '1');
console.log(sessionStorage.getItem('step'));

sessionStorage.setItem('cart', JSON.stringify([
  { id: 1, qty: 2 },
  { id: 5, qty: 1 },
]));

const cart = JSON.parse(sessionStorage.getItem('cart'));
console.log('총 개수:', cart.reduce((s, i) => s + i.qty, 0));

src/03_cookie_overview.js

javascript

/**
 * 쿠키 개요 — document.cookie로 모든 쿠키를 한 문자열로 받음
 */
console.log('현재 쿠키:', document.cookie);

// 설정 (만료 1일, 모든 경로)
const oneDay = 60 * 60 * 24;
document.cookie = `lang=ko; max-age=${oneDay}; path=/`;

// 파싱 예시
const cookies = Object.fromEntries(
  document.cookie.split('; ').filter(Boolean).map((c) => c.split('=')),
);
console.log(cookies);

src/04_comparison.js

javascript

/**
 * 세 저장소 비교 데모
 */
localStorage.setItem('demo', 'L');
sessionStorage.setItem('demo', 'S');
document.cookie = 'demo=C; path=/';

console.log('local:', localStorage.getItem('demo'));    // 영구
console.log('session:', sessionStorage.getItem('demo')); // 탭 한정
console.log('cookie:', document.cookie);                 // 서버로 전송

자주 하는 실수

객체를 그대로 저장 → `[object Object]` 문자열이 됨.
`getItem`이 `null`을 반환할 수 있는데 처리하지 않음.
민감 정보(비밀번호 등)를 localStorage에 저장.
sessionStorage가 새 탭에서도 공유된다고 오해.
쿠키를 `document.cookie`로만 직접 다루며 보안 옵션 무시.

FAQ

Q1. 시크릿 창에서도 저장되나요?

창을 닫으면 모두 사라집니다. **Q2. 용량 초과하면?** A. `QuotaExceededError`가 발생합니다. **Q3. 도메인이 다르면 공유되나요?** A. 안 됩니다. 출처(origin)별로 격리됩니다.

과제

간단한 메모장과 다크모드 토글을 저장소에 저장하세요.

homework/README.md

## 과제 1 — 메모장 `<textarea>`에 입력한 내용을 localStorage에 저장하고, 새로고침해도 유지되게 만드세요.

## 과제 2 — 다크모드 토글 버튼으로 다크모드를 켜고 끌 수 있게 만들고, 선택 상태를 localStorage에 저장하세요.

다크일 때 `<body>`에 `dark` 클래스 추가.

homework/answer/homework_01.html

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>메모장</title>
  </head>
  <body>
    <h1>나의 메모</h1>
    <textarea id="memo" rows="10" cols="40"></textarea>
    <script src="homework_01.js"></script>
  </body>
</html>

homework/answer/homework_01.js

javascript

/**
 * 과제 1: localStorage 메모장
 */
const KEY = 'memo:text';
const memo = document.getElementById('memo');

memo.value = localStorage.getItem(KEY) ?? '';
memo.addEventListener('input', () => {
  localStorage.setItem(KEY, memo.value);
});

homework/answer/homework_02.html

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>다크모드</title>
    <style>
      body { background: #fff; color: #222; transition: 0.2s; }
      body.dark { background: #222; color: #eee; }
    </style>
  </head>
  <body>
    <button id="toggle">다크모드 토글</button>
    <script src="homework_02.js"></script>
  </body>
</html>

homework/answer/homework_02.js

javascript

/**
 * 과제 2: 다크모드 토글 + localStorage 저장
 */
const KEY = 'theme';
const btn = document.getElementById('toggle');

if (localStorage.getItem(KEY) === 'dark') {
  document.body.classList.add('dark');
}

btn.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const mode = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem(KEY, mode);
});

다음 단원

[23_모듈_ESM](../23_모듈_ESM/)

예제 코드 / 강의 자료

전체 강의 자료와 예제 코드는 GitHub에서 자유롭게 받아볼 수 있습니다.

GitHub에서 보기 ↗