서버도, 로그인도 없이 사용자 데이터를 브라우저에 저장하는 방법.
다크모드 설정 기억, 메모장 앱, 장바구니까지 — 단 4줄이면 충분해요.
브라우저에 데이터를 저장하는 가장 간단한 방법 — 새로고침해도 사라지지 않아요
웹 페이지를 새로고침하면 JavaScript 변수는 모두 사라져요. 하지만 사용자가 선택한 다크모드 설정, 작성 중인 메모, 장바구니 아이템은 새로고침 후에도 남아 있어야 하죠. localStorage는 바로 이런 상황을 위해 만들어진 브라우저 내장 저장소예요.
localStorage.setItem('key', 'value') 한 줄로 데이터를 저장하고,
localStorage.getItem('key')로 꺼내쓸 수 있어요.
저장된 데이터는 브라우저를 닫았다 열어도, 컴퓨터를 재시작해도 사라지지 않아요.
같은 브라우저라도 사이트별로 별도 저장소를 가져요. 내 사이트 데이터가 다른 사이트에 노출될 걱정 없어요.
명시적으로 삭제하지 않는 한 영구 저장돼요. 쿠키처럼 만료 기간이 없어요.
도메인당 약 5MB까지 저장 가능해요. 텍스트 데이터라면 수백만 글자도 거뜬해요.
비동기(async/await) 없이 바로 읽고 씁니다. 코드가 단순해서 입문자에게 이상적이에요.
| 구분 | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| 지속성 | 영구 (수동 삭제 전) | 탭 닫으면 삭제 | 만료일 설정 가능 |
| 용량 | ~5MB | ~5MB | 4KB (매우 작음) |
| 서버 전송 | 없음 | 없음 | HTTP 요청마다 자동 전송 |
| 주요 용도 | 설정 저장, 임시 데이터 | 페이지 간 임시 전달 | 로그인 세션, 추적 |
이 4개만 알면 localStorage는 마스터
데이터를 저장해요. 키-값 쌍으로 저장되고, 같은 키로 다시 저장하면 덮어써요.
저장된 데이터를 꺼내요. 없는 키를 요청하면 null을 반환해요.
특정 키의 데이터를 삭제해요. 삭제 후 getItem하면 null이 반환돼요.
해당 도메인의 모든 localStorage 데이터를 삭제해요. 초기화 버튼 구현에 사용해요.
localStorage는 문자열만 저장돼요. 숫자나 배열, 객체를 저장하려면 JSON.stringify()로 문자열로 변환해서 저장하고, 꺼낼 때는 JSON.parse()로 복원해야 해요.
localStorage.setItem('cart', JSON.stringify([{id:1, name:'상품A'}]));
const cart = JSON.parse(localStorage.getItem('cart') || '[]');
바로 복붙해서 쓸 수 있는 실용 코드
// 저장: 사용자가 다크모드 선택 시 function setTheme(theme) { localStorage.setItem('theme', theme); document.body.setAttribute('data-theme', theme); } // 불러오기: 페이지 로드 시 const savedTheme = localStorage.getItem('theme') || 'light'; setTheme(savedTheme);
// 장바구니 불러오기 (없으면 빈 배열) function getCart() { return JSON.parse(localStorage.getItem('cart') || '[]'); } // 장바구니에 아이템 추가 function addToCart(item) { const cart = getCart(); cart.push(item); localStorage.setItem('cart', JSON.stringify(cart)); } // 사용 예시 addToCart({ id: 1, name: '바이브툴킷 굿즈', price: 15000 });
const lastVisit = localStorage.getItem('lastVisit'); if (lastVisit) { const date = new Date(lastVisit); console.log(`마지막 방문: ${date.toLocaleString('ko-KR')}`); } // 현재 방문 시각 저장 (다음 방문에 표시) localStorage.setItem('lastVisit', new Date().toISOString());
"사용자가 입력한 닉네임을 localStorage에 저장하고, 다음에 사이트에 오면 '안녕하세요, [닉네임]님!' 이라고 인사하는 코드를 만들어줘."
글을 쓰고 새로고침해도 내용이 남아있어요 — localStorage의 힘
try/catch로 오류를 잡아서 처리하는 게 안전해요.try { localStorage.setItem('key', 'value'); } catch(e) { console.warn('localStorage 사용 불가'); }
storage 이벤트를 사용해요:window.addEventListener('storage', (e) => { console.log(e.key, e.newValue); });// 저장 시 만료 시각도 함께 저장
function setWithExpiry(key, value, hours) {
const expiry = Date.now() + hours * 3600 * 1000;
localStorage.setItem(key, JSON.stringify({ value, expiry }));
}
// 꺼낼 때 만료 확인
function getWithExpiry(key) {
const raw = localStorage.getItem(key);
if (!raw) return null;
const { value, expiry } = JSON.parse(raw);
if (Date.now() > expiry) { localStorage.removeItem(key); return null; }
return value;
}
let total = 0; for (let key in localStorage) { total += (localStorage[key].length + key.length) * 2; } console.log((total / 1024).toFixed(2) + ' KB');