로컬스토리지 & 세션스토리지

핵심 개념

localStorage는 브라우저를 닫아도 데이터가 유지되고, sessionStorage는 탭을 닫으면 삭제됩니다. setItem(key, value)로 저장, getItem(key)로 읽기, removeItem(key)로 삭제합니다. 값은 반드시 문자열이므로 객체는 JSON.stringify/parse로 변환합니다. 최대 5MB 제한이 있습니다. 저장/불러오기 코드를 지우며 데이터 영속성이 사라지는 것을 확인하십시오.

코드 분석

JS📋 코드 (29줄)

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
  <input id='storage-input' placeholder='저장할 내용 입력...' style='width:100%; padding:8px; background:#1a1a1a; color:#e8e8e8; border:1px solid #333; font-family:monospace; margin-bottom:8px; box-sizing:border-box;'/>
  <div style='display:flex; gap:6px; margin-bottom:12px;'>
    <button onclick='saveData()' style='padding:8px 12px; background:#10b981; color:#080808; border:none; cursor:pointer; font-family:monospace; font-weight:bold;'>SAVE</button>
    <button onclick='loadData()' style='padding:8px 12px; background:#333; color:#e8e8e8; border:none; cursor:pointer; font-family:monospace;'>LOAD</button>
    <button onclick='clearData()' style='padding:8px 12px; background:#1a1a1a; color:#555; border:none; cursor:pointer; font-family:monospace;'>CLEAR</button>
  </div>
  <div id='storage-out' style='padding:8px; background:#030303; color:#888; border:1px solid #1a1a1a; min-height:40px;'>데이터 없음</div>
</div>
<script>
  function saveData() {
    const val = document.getElementById('storage-input').value;
    const data = { value: val, timestamp: new Date().toISOString(), unit: 'T-800' };
    localStorage.setItem('mission_data', JSON.stringify(data));
    document.getElementById('storage-out').innerHTML = '<span style="color:#22c55e">SAVED:</span> ' + JSON.stringify(data);
  }
  function loadData() {
    const raw = localStorage.getItem('mission_data');
    const out = document.getElementById('storage-out');
    if (raw) {
      const data = JSON.parse(raw);
      out.innerHTML = '<span style="color:#10b981">LOADED:</span> ' + data.value + ' (' + data.timestamp + ')';
    } else out.textContent = '저장된 데이터 없음';
  }
  function clearData() {
    localStorage.removeItem('mission_data');
    document.getElementById('storage-out').textContent = 'CLEARED';
  }
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS '로컬스토리지 & 세션스토리지' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'로컬스토리지 & 세션스토리지'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS '로컬스토리지 & 세션스토리지' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'로컬스토리지 & 세션스토리지'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

로컬스토리지 & 세션스토리지는 이 3가지만 확실히 잡으세요

1.쿠키로 클라이언트 데이터를 관리하면 4KB 제한에 매 요청마다 서버로 전송돼서 성능이 낭비됩니다

2.localStorage는 영구 저장, sessionStorage는 탭 종료 시 삭제 — 둘 다 약 5MB, 문자열만 저장합니다

3.다음 챕터에서 서버와 데이터를 주고받는 fetch API와 JSON을 배웁니다

💬 이 챕터 질문 보기

JS · CH.21 — 질문하거나 답변을 확인하세요

→

진행도 21 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)