html5
CHAPTER 19 / 33
읽기 약 2분
FUNCTION
세션 스토리지: Session Storage
핵심 개념
잠시만 기억하는 임시 메모장이에요. 브라우저 탭을 닫으면 저장된 내용이 모두 사라진답니다.
코드 분석
<input type='text' id='sessionInput' placeholder='임시 데이터'>
<button onclick='saveSession()'>세션 저장</button>
<button onclick='loadSession()'>세션 불러오기</button>
<div id='result'></div>
<script>
function saveSession() {
const val = document.getElementById('sessionInput').value;
sessionStorage.setItem('tempData', val);
alert('세션에 저장되었습니다: ' + val);
}
function loadSession() {
const data = sessionStorage.getItem('tempData');
document.getElementById('result').innerHTML = '세션 데이터: ' + (data || '없음');
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 sessionStorage 코드에서 탭/창 분리 정책 오해, 새로고침 동작 가정 오류를 찾아 올바르게 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
sessionStorage로 폼 임시저장(인풋 값 자동 복구) 기능을 복사 가능한 완성 코드로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
sessionStorage vs localStorage vs Cookie의 사용 사례를 전체 프로젝트 코드 분석으로 어디에 어떤 걸 써야 할지 정리해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년 SaaS 서비스에서 sessionStorage가 여전히 의미 있는 케이스가 뭔지 실무자 관점으로 알려줘.
⭐ 이것만 기억하세요
세션 스토리지: Session Storage는 이 3가지만 확실히 잡으세요
1.로그인 토큰처럼 임시 데이터를 localStorage에 넣으면 브라우저를 닫아도 남아서 보안 위험이 생깁니다
2.sessionStorage는 탭 단위로 격리되고, 탭을 닫으면 자동 삭제돼서 임시 상태 관리에 적합합니다
3.다음 챕터에서 email, tel 입력 타입을 심화 학습하며 모바일 키보드 최적화를 배웁니다
공유하기
진행도 19 / 33