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

"새로고침하면 다 사라져요!"

할 일 목록을 만들었는데 새로고침하면 입력한 내용이 모두 사라집니다. 서버 없이도 브라우저에 데이터를 저장하려면 localStorage를 사용합니다.

localStorage란?

브라우저가 제공하는 간단한 키-값 저장소입니다.

탭을 닫거나 새로고침해도 데이터가 유지됩니다
같은 도메인 내에서만 접근 가능
문자열만 저장 가능 (객체는 JSON으로 변환)
약 5MB 용량

기본 사용법

// 저장
localStorage.setItem("name", "홍길동");
localStorage.setItem("age", "16");

// 읽기
const name = localStorage.getItem("name");
console.log(name);   // "홍길동"

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

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

객체/배열 저장 — JSON

localStorage는 문자열만 저장하므로 객체와 배열은 JSON으로 변환해야 합니다.

// 객체를 문자열로 변환해서 저장
const user = { name: "홍길동", age: 16 };
localStorage.setItem("user", JSON.stringify(user));

// 문자열을 다시 객체로 변환해서 읽기
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name);   // 홍길동

// 배열 저장
const todos = ["공부하기", "운동하기", "독서하기"];
localStorage.setItem("todos", JSON.stringify(todos));

// 배열 읽기
const savedTodos = JSON.parse(localStorage.getItem("todos"));
console.log(savedTodos);   // ["공부하기", "운동하기", "독서하기"]

안전하게 읽기

저장된 데이터가 없을 때 getItem은 null을 반환합니다.

function loadTodos() {
  const saved = localStorage.getItem("todos");
  return saved ? JSON.parse(saved) : [];   // 없으면 빈 배열
}

실전 예제: 영구 저장되는 할 일 목록

<input type="text" id="todo-input" placeholder="할 일 입력" />
<button id="add-btn">추가</button>
<ul id="todo-list"></ul>

// 페이지 로드 시 저장된 할 일 불러오기
let todos = loadTodos();

function loadTodos() {
  const saved = localStorage.getItem("todos");
  return saved ? JSON.parse(saved) : [];
}

function saveTodos() {
  localStorage.setItem("todos", JSON.stringify(todos));
}

function renderTodos() {
  const list = document.querySelector("#todo-list");
  list.innerHTML = todos
    .map((todo, index) => `
      <li>
        ${todo}
        <button onclick="deleteTodo(${index})">삭제</button>
      </li>
    `)
    .join("");
}

function deleteTodo(index) {
  todos.splice(index, 1);
  saveTodos();
  renderTodos();
}

// 추가 버튼
document.querySelector("#add-btn").addEventListener("click", () => {
  const input = document.querySelector("#todo-input");
  const text = input.value.trim();

  if (text === "") return;

  todos.push(text);
  saveTodos();      // localStorage에 저장
  renderTodos();    // 화면 업데이트
  input.value = "";
});

// 초기 렌더링
renderTodos();

sessionStorage

localStorage와 동일하지만 탭을 닫으면 사라집니다.

// API는 동일
sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");
sessionStorage.removeItem("key");

임시 폼 데이터나 세션 내 상태 저장에 씁니다.

다크 모드 설정 저장하기

// 저장된 테마 불러오기
const savedTheme = localStorage.getItem("theme") || "light";
document.body.classList.add(savedTheme);

const themeBtn = document.querySelector("#theme-btn");

themeBtn.addEventListener("click", () => {
  const isDark = document.body.classList.toggle("dark");
  localStorage.setItem("theme", isDark ? "dark" : "light");
  themeBtn.textContent = isDark ? "라이트 모드" : "다크 모드";
});

이제 페이지를 새로고침해도 다크 모드 설정이 유지됩니다.

직접 해보기 ✏️

앞 편에서 만든 할 일 목록에 localStorage를 추가해 보세요.

페이지 로드 시 localStorage에서 할 일 목록 불러오기
할 일 추가/삭제 시 localStorage에 저장
새로고침해도 목록이 유지되는지 확인

추가 도전:

할 일을 클릭하면 완료 표시(취소선) 토글
완료 여부도 함께 저장

정리

기능	코드
저장	`localStorage.setItem("키", 값)`
읽기	`localStorage.getItem("키")`
삭제	`localStorage.removeItem("키")`
객체 저장	`JSON.stringify(객체)` 후 저장
객체 읽기	`JSON.parse(localStorage.getItem("키"))`

다음 편에서는 fetch API — 외부 서버에서 데이터를 가져와 화면에 보여주는 방법을 배웁니다.