Frontend/HTML

HTML5 로컬 스토리지 기초: 브라우저에 데이터를 저장하고 불러오는 간단한 방법

미니임 2026. 2. 27. 10:57

 

웹 애플리케이션을 개발하다 보면 사용자 설정을 저장하거나, 폼 입력 데이터를 임시로 보관해야 할 때가 있습니다. 과거에는 이를 위해 쿠키(Cookie)를 주로 사용했지만, 이제는 더 쉽고 강력한 **로컬 스토리지(Local Storage)**를 사용합니다.

이 포스트에서는 로컬 스토리지의 개념부터 객체 저장 방법, 그리고 실전 예제까지 상세히 알아보겠습니다.

1. 로컬 스토리지(Local Storage)란?

로컬 스토리지는 웹 브라우저가 제공하는 키-값(Key-Value) 형태의 저장소입니다.

주요 특징

  • 지속성: 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 사라지지 않습니다.
  • 용량: 쿠키(약 4KB)보다 훨씬 큰 용량(보통 5MB 내외)을 제공합니다.
  • 서버 전송 없음: 쿠키와 달리 HTTP 요청 시 서버로 전송되지 않아 성능상 이점이 있습니다.
  • 보안: 도메인별로 데이터가 격리되어 안전합니다.

2. 기본 API 사용법

로컬 스토리지는 window.localStorage 객체를 통해 접근하며, 매우 직관적인 메서드를 제공합니다.

데이터 저장하기 (setItem)

// localStorage.setItem('키', '값');
localStorage.setItem('username', '나그네');
localStorage.setItem('theme', 'dark');

데이터 불러오기 (getItem)

const user = localStorage.getItem('username');
console.log(user); // 출력: 나그네

데이터 삭제 및 전체 초기화 (removeItem, clear)

// 특정 데이터 삭제
localStorage.removeItem('theme');

// 모든 데이터 삭제
localStorage.clear();

3. 고급 활용: 객체와 배열 저장하기

로컬 스토리지는 오직 **문자열(String)**만 저장할 수 있습니다. 숫자나 객체를 그대로 저장하면 [object Object]와 같은 형태로 변형되어 버립니다. 이를 해결하기 위해 JSON 메서드를 사용합니다.

잘못된 예시

const userObj = { id: 1, name: '홍길동' };
localStorage.setItem('user', userObj); 
console.log(localStorage.getItem('user')); // "[object Object]" 출력 (데이터 손실)

올바른 예시 (JSON 활용)

const userObj = { id: 1, name: '홍길동' };

// 1. 객체를 JSON 문자열로 변환하여 저장
localStorage.setItem('user', JSON.stringify(userObj));

// 2. 문자열을 다시 객체로 변환하여 불러오기
const storedData = localStorage.getItem('user');
const parsedData = JSON.parse(storedData);

console.log(parsedData.name); // 출력: 홍길동

4. 실전 예제: 다크 모드 설정 유지하기

사용자가 선택한 테마 설정을 로컬 스토리지에 저장하여, 페이지를 새로고침해도 설정이 유지되도록 만드는 예제입니다.

HTML & JavaScript 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로컬 스토리지 테마 관리</title>
    <style>
        body.dark { background-color: #333; color: white; }
        .container { padding: 20px; font-family: sans-serif; }
        button { padding: 10px 20px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="title">테마 설정 예제</h1>
        <button id="themeToggle">테마 변경하기</button>
    </div>

    <script>
        const btn = document.getElementById('themeToggle');
        const body = document.body;

        // 1. 페이지 로드 시 기존 설정 확인
        const currentTheme = localStorage.getItem('site-theme');
        if (currentTheme === 'dark') {
            body.classList.add('dark');
        }

        // 2. 버튼 클릭 시 설정 변경 및 저장
        btn.addEventListener('click', () => {
            body.classList.toggle('dark');
            
            // 현재 상태 판별
            let theme = 'light';
            if (body.classList.contains('dark')) {
                theme = 'dark';
            }
            
            // 로컬 스토리지에 저장
            localStorage.setItem('site-theme', theme);
        });
    </script>
</body>
</html>

5. 주의사항 및 제한 사항

  1. 보안 민감 데이터: 로컬 스토리지는 자바스크립트로 쉽게 접근 가능하므로, 사용자의 비밀번호나 개인정보, 금융 정보 등은 절대 저장하지 마세요. (XSS 공격에 취약할 수 있습니다.)
  2. 동기적 작동: 로컬 스토리지 작업은 동기(Synchronous) 방식으로 작동합니다. 너무 많은 데이터를 한꺼번에 다루면 메인 스레드 성능에 영향을 줄 수 있습니다.
  3. 브라우저 모드: '시크릿 모드'나 '사생활 보호 모드'에서는 브라우저 종료 시 로컬 스토리지 데이터가 삭제되거나 접근이 제한될 수 있습니다.
반응형