"새로고침하면 다 사라져요!"#
할 일 목록을 만들었는데 새로고침하면 입력한 내용이 모두 사라집니다. 서버 없이도 브라우저에 데이터를 저장하려면 localStorage를 사용합니다.
localStorage란?#
브라우저가 제공하는 간단한 키-값 저장소입니다.
- 탭을 닫거나 새로고침해도 데이터가 유지됩니다
- 같은 도메인 내에서만 접근 가능
- 문자열만 저장 가능 (객체는 JSON으로 변환)
- 약 5MB 용량
기본 사용법#
JavaScript
// 저장
localStorage.setItem("name", "홍길동");
localStorage.setItem("age", "16");
// 읽기
const name = localStorage.getItem("name");
console.log(name); // "홍길동"
// 삭제
localStorage.removeItem("age");
// 전체 삭제
localStorage.clear();객체/배열 저장 — JSON#
localStorage는 문자열만 저장하므로 객체와 배열은 JSON으로 변환해야 합니다.
JavaScript
// 객체를 문자열로 변환해서 저장
const user = { name: "홍길동", age: 16 };
localStorage.setItem("user", JSON.stringify(user));
// 문자열을 다시 객체로 변환해서 읽기
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 홍길동JavaScript
// 배열 저장
const todos = ["공부하기", "운동하기", "독서하기"];
localStorage.setItem("todos", JSON.stringify(todos));
// 배열 읽기
const savedTodos = JSON.parse(localStorage.getItem("todos"));
console.log(savedTodos); // ["공부하기", "운동하기", "독서하기"]안전하게 읽기#
저장된 데이터가 없을 때 getItem은 null을 반환합니다.
JavaScript
function loadTodos() {
const saved = localStorage.getItem("todos");
return saved ? JSON.parse(saved) : []; // 없으면 빈 배열
}실전 예제: 영구 저장되는 할 일 목록#
HTML
<input type="text" id="todo-input" placeholder="할 일 입력" />
<button id="add-btn">추가</button>
<ul id="todo-list"></ul>JavaScript
// 페이지 로드 시 저장된 할 일 불러오기
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와 동일하지만 탭을 닫으면 사라집니다.
JavaScript
// API는 동일
sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");
sessionStorage.removeItem("key");임시 폼 데이터나 세션 내 상태 저장에 씁니다.
다크 모드 설정 저장하기#
JavaScript
// 저장된 테마 불러오기
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 — 외부 서버에서 데이터를 가져와 화면에 보여주는 방법을 배웁니다.
