html5
CHAPTER 18 / 33
읽기 약 2분
SYNTAX
로컬 스토리지: Local Storage
핵심 개념
브라우저를 껐다 켜도 사라지지 않는 아주 튼튼한 저장고예요. 자동 로그인 정보나 설정값을 저장하기 좋아요.
코드 분석
<input type='text' id='nameInput' placeholder='저장할 이름'>
<button onclick='saveData()'>데이터 저장</button>
<button onclick='loadData()'>데이터 불러오기</button>
<div id='result'></div>
<script>
function saveData() {
const val = document.getElementById('nameInput').value;
localStorage.setItem('myData', val);
alert('저장되었습니다: ' + val);
}
function loadData() {
const data = localStorage.getItem('myData');
document.getElementById('result').innerHTML = '불러온 데이터: ' + (data || '없음');
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 localStorage 사용 코드에서 JSON 파싱 에러, 용량 초과, XSS 보안 허점을 찾아 안전한 래퍼 함수로 리팩토링해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
localStorage로 다크모드, 장바구니, 최근 본 상품을 실전 React·Vanilla JS 코드로 각각 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 앱의 localStorage 사용 패턴 전체를 분석해서 데이터 크기, 키 네이밍, 만료 처리, 보안 위험을 우선순위 리포트로 만들어줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년에 localStorage vs IndexedDB vs Cookie를 실무에서 어떻게 나눠 쓰는지, 신규 프로젝트에 뭘 권하는지 솔직히 알려줘.
⭐ 이것만 기억하세요
로컬 스토리지: Local Storage는 이 3가지만 확실히 잡으세요
1.쿠키만 사용하면 4KB 용량 제한에 걸리고, 매 HTTP 요청마다 서버로 전송돼서 성능이 낭비됩니다
2.localStorage는 브라우저를 닫아도 데이터가 유지되며, 약 5MB까지 키-값 쌍을 문자열로 저장합니다
3.다음 챕터에서 탭을 닫으면 자동 삭제되는 Session Storage와의 차이를 배웁니다
공유하기
진행도 18 / 33