🟨 2-4. localStorage로 데이터 저장하고 불러오기 — 새로고침해도 남는 자바스크립트 데이터 관리

frontend/javascript

🟨 2-4. localStorage로 데이터 저장하고 불러오기 — 새로고침해도 남는 자바스크립트 데이터 관리

mirabo01 2025. 11. 7. 08:48

1. localStorage란 무엇인가

웹 브라우저에는 데이터를 저장할 수 있는 3대 저장소가 있다.

종류 지속성 크기 특징

localStorage	✅ 무기한 유지	약 5MB	새로고침/닫기 후에도 유지
sessionStorage	❌ 탭 닫으면 삭제	약 5MB	세션(탭) 단위 유지
cookie	서버 전송 가능	약 4KB	인증·추적용에 주로 사용

localStorage는 그중에서도 가장 간단하고,
사용자 브라우저에 직접 데이터를 남길 수 있는 기능이다.

2. 기본 문법 요약

// 저장하기
localStorage.setItem("key", "value");

// 불러오기
const value = localStorage.getItem("key");

// 삭제하기
localStorage.removeItem("key");

// 전체 비우기
localStorage.clear();

✅ 모든 데이터는 문자열(String) 로 저장된다.
객체나 배열을 저장할 때는 JSON으로 변환해야 한다.

3. 예시: 메모장 기능 만들기

이제 진짜 실습을 해보자.
입력한 메모를 저장하고, 새로고침 후에도 남는 기능을 구현한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>localStorage 메모장</title>
  <style>
    body { font-family: sans-serif; margin: 40px; }
    textarea { width: 100%; height: 150px; border: 1px solid #ccc; border-radius: 6px; padding: 10px; }
    button { margin-top: 10px; padding: 8px 12px; border: none; border-radius: 6px; background: #4a90e2; color: #fff; cursor: pointer; }
    .status { margin-top: 10px; color: green; }
  </style>
</head>
<body>
  <h1>🗒️ 내 메모</h1>
  <textarea id="memo" placeholder="여기에 메모를 입력하세요..."></textarea>
  <button id="saveBtn">저장</button>
  <div class="status" id="status"></div>

  <script type="module" src="main.js"></script>
</body>
</html>

4. 자바스크립트 로직

// main.js
const memo = document.getElementById("memo");
const saveBtn = document.getElementById("saveBtn");
const status = document.getElementById("status");

// 페이지 로드 시 기존 메모 불러오기
window.addEventListener("load", () => {
  const saved = localStorage.getItem("myMemo");
  if (saved) memo.value = saved;
});

// 저장 버튼 클릭 시
saveBtn.addEventListener("click", () => {
  localStorage.setItem("myMemo", memo.value);
  status.textContent = "✅ 메모가 저장되었습니다!";
  setTimeout(() => (status.textContent = ""), 1500);
});

이렇게만 하면 페이지를 새로고침해도
localStorage에 저장된 내용이 그대로 유지된다.

5. 객체 형태로 저장하기

실무에서는 단순 문자열보다 객체 형태로 데이터를 관리하는 경우가 많다.

const user = { name: "기범", age: 27, job: "Frontend" };

// 객체 → 문자열
localStorage.setItem("user", JSON.stringify(user));

// 문자열 → 객체
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "기범"

✅ 주의:
JSON.stringify / JSON.parse 를 꼭 써야 한다.
그렇지 않으면 [object Object]로 저장되어 쓸모가 없어진다.

6. 데이터 삭제 및 초기화

// 특정 데이터만 삭제
localStorage.removeItem("myMemo");

// 전체 초기화
localStorage.clear();

일반적으로 로그아웃, 초기화 버튼 클릭 시 이런 동작이 수행된다.

7. 실무 응용 예시

기능 localStorage 사용 방식

다크 모드 유지	theme: "dark" 저장 후 body class 변경
장바구니 유지	상품 배열을 JSON으로 저장
최근 본 상품	리스트를 push 후 5개까지만 유지
로그인 유지	JWT 토큰 저장 (단, 민감정보는 ❌)
체크박스 상태 기억	checked: true/false 저장

예시: 다크 모드 토글

<button id="toggleTheme">🌙 다크 모드</button>

const btn = document.getElementById("toggleTheme");
const body = document.body;

window.addEventListener("load", () => {
  const theme = localStorage.getItem("theme");
  if (theme === "dark") body.classList.add("dark");
});

btn.addEventListener("click", () => {
  body.classList.toggle("dark");
  const mode = body.classList.contains("dark") ? "dark" : "light";
  localStorage.setItem("theme", mode);
});

CSS

body.dark {
  background: #121212;
  color: white;
}

✅ 이제 새로고침해도 다크모드 상태가 유지된다.
이런 기능은 실제 쇼핑몰, 블로그, 앱에서도 자주 쓰인다.

8. sessionStorage와의 차이

sessionStorage는 탭 단위 저장소다.
즉, 같은 브라우저라도 새 창을 열면 데이터가 유지되지 않는다.

비교 항목 localStorage sessionStorage

유지 기간	무기한	탭 닫을 때까지
공유 범위	같은 도메인 내 모든 탭	현재 탭만
용도	로그인 유지, 다크모드, 장바구니	임시 검색 결과, 폼 상태

9. 보안과 주의사항

localStorage는 브라우저에 평문 저장된다.
→ 누구나 개발자 도구로 내용을 볼 수 있음
비밀번호, 토큰, 개인정보는 절대 저장 금지
민감한 데이터는 cookie + httpOnly 또는 서버 세션으로 관리해야 한다.

10. 요약 정리

주제 핵심 요약

저장소 개념	브라우저에 데이터를 저장하는 3가지 방식 중 하나
지속성	새로고침/닫기 후에도 유지
데이터 형식	문자열만 가능, 객체는 JSON으로 변환
실습 예시	메모장, 다크모드, 장바구니
주의사항	민감정보 저장 금지, 크기 제한(약 5MB)

11. 마무리

이제 당신은 브라우저 안에서도 작은 데이터베이스를 다룰 수 있게 되었다.
React, Vue 같은 프레임워크로 가도 이 개념은 그대로 적용된다.

결국 상태(State)를 어떻게 저장하고 복원하느냐가
프론트엔드의 본질이다.