localStorage — 브라우저에 데이터 저장하기

이 토픽을 마치면

localStorage의 사용법, 한계, 그리고 어떤 데이터를 저장해야 하는지 판단할 수 있게 됩니다.

새로고침하면 사라지는 데이터

JavaScript 변수는 페이지를 새로고침하면 사라집니다. 사용자가 다크 모드를 선택했는데 새로고침할 때마다 라이트 모드로 돌아가면 불편합니다.

localStorage는 브라우저에 데이터를 영구 저장합니다. 새로고침해도, 브라우저를 닫아도 남아있습니다.

기본 사용법

// 저장
localStorage.setItem("theme", "dark");

// 읽기
const theme = localStorage.getItem("theme"); // "dark"

// 삭제
localStorage.removeItem("theme");

// 전체 삭제
localStorage.clear();

키-값 쌍으로 저장합니다. 값은 반드시 문자열입니다.

객체는 JSON으로

const user = { name: "Alice", age: 25 };

// 저장 — 객체를 문자열로
localStorage.setItem("user", JSON.stringify(user));

// 읽기 — 문자열을 객체로
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "Alice"

localStorage는 문자열만 저장하므로, 객체를 넣으려면 JSON.stringify로 변환해야 합니다. 읽을 때는 JSON.parse로 복원합니다.

직접 객체를 넣으면:

localStorage.setItem("user", { name: "Alice" });
localStorage.getItem("user"); // "[object Object]" — 쓸모없는 문자열

localStorage vs sessionStorage

// localStorage — 영구 저장
localStorage.setItem("key", "value");

// sessionStorage — 탭 닫으면 삭제
sessionStorage.setItem("key", "value");

sessionStorage는 브라우저 탭을 닫으면 사라집니다. 같은 사이트의 다른 탭과도 공유되지 않습니다. 일회성 데이터(입력 중인 폼 백업 등)에 적합합니다.

주의할 점

용량 제한: 도메인당 약 5MB. 작은 설정값에는 충분하지만, 대량 데이터는 저장하지 마세요.

문자열만 가능: 숫자, boolean도 문자열로 변환됩니다.

localStorage.setItem("count", 42);
const count = localStorage.getItem("count"); // "42" (문자열)
const num = Number(count); // 42 (숫자로 변환)

보안 민감 데이터 저장 금지: localStorage는 JavaScript로 누구나 읽을 수 있습니다. 비밀번호, 토큰, 개인정보를 넣으면 XSS 공격으로 탈취될 수 있습니다.

동기 API: localStorage는 동기적으로 동작합니다. 큰 데이터를 읽고 쓰면 메인 스레드를 막을 수 있습니다.

실무 활용

적합한 데이터: 테마 설정, 언어 설정, 최근 검색어, 장바구니(비로그인 사용자), 온보딩 완료 여부.

부적합한 데이터: 인증 토큰, 비밀번호, 사용자 개인정보, 대용량 데이터.

핵심

localStorage는 브라우저에 키-값 문자열을 영구 저장합니다. 객체는 JSON.stringify/JSON.parse로 변환해서 다룹니다. 보안 민감 데이터는 절대 저장하지 마세요.