HTML 중급 도구

HTML 로컬 스토리지 (Local Storage)

HTML 로컬 스토리지 (Local Storage) — 중급

로컬 스토리지 (Local Storage)

1. 도입 (왜 배워야 하는가)

로컬 스토리지는 웹 애플리케이션에서 사용자 데이터를 클라이언트 측에서 저장할 수 있는 방법입니다. 실무에서 사용자 맞춤형 경험을 제공하기 위해 매우 중요합니다. 예를 들어, 사용자가 이전에 입력한 데이터를 기억하거나, 장바구니에 담은 상품 정보를 유지하는 등의 기능을 구현할 수 있습니다.

로컬 스토리지를 모르면 사용자가 페이지를 새로 고침하거나 다시 방문할 때마다 정보를 잃게 되어 불편한 사용자 경험을 초래할 수 있습니다. 이는 사용자 이탈로 이어질 수 있으며, 결국 비즈니스 손실로 이어질 수 있습니다.

2. 핵심 개념 설명

로컬 스토리지는 웹 브라우저가 제공하는 저장소로, 데이터를 영구적으로 저장할 수 있습니다. 이는 서버에 요청하지 않고도 데이터를 접근할 수 있게 해주는 중요한 기능입니다.

용어	설명
Key-Value Pair	데이터를 저장할 때, 키와 값의 쌍으로 저장하는 방식
Persistent Storage	브라우저를 닫더라도 데이터가 유지되는 저장소
Session Storage	브라우저 세션이 끝날 때까지 데이터를 유지하는 저장소

3. 기본 코드 예제

로컬 스토리지의 가장 기본적인 사용법을 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로컬 스토리지 예제</title>
</head>
<body>
    <input type="text" id="username" placeholder="이름을 입력하세요">
    <button id="saveButton">저장</button>
    <button id="loadButton">불러오기</button>
    <p id="greeting"></p>

    <script>
        document.getElementById('saveButton').onclick = function() {
            const username = document.getElementById('username').value; // 입력된 이름을 가져옴
            localStorage.setItem('username', username); // 로컬 스토리지에 저장
            alert('이름이 저장되었습니다!'); // 저장 확인 알림
        };

        document.getElementById('loadButton').onclick = function() {
            const storedUsername = localStorage.getItem('username'); // 로컬 스토리지에서 이름을 불러옴
            document.getElementById('greeting').innerText = '안녕하세요, ' + storedUsername; // 불러온 이름으로 인사
        };
    </script>
</body>
</html>

실행 결과:

사용자가 이름을 입력하고 "저장" 버튼을 클릭하면 로컬 스토리지에 이름이 저장됩니다.
"불러오기" 버튼을 클릭하면 인사 메시지가 나타납니다.

코드 한 줄씩 동작 설명:

<input> 요소에서 사용자가 이름을 입력할 수 있도록 합니다.
"저장" 버튼에 클릭 이벤트를 추가하여 클릭 시 실행될 기능을 정의합니다.
입력된 이름을 가져와 로컬 스토리지에 'username'이라는 키로 저장합니다.
저장이 완료되면 알림을 통해 사용자에게 확인합니다.
"불러오기" 버튼에 클릭 이벤트를 추가하여 클릭 시 실행될 기능을 정의합니다.
로컬 스토리지에서 'username' 값을 가져와 변수에 저장합니다.
가져온 이름을 사용하여 인사 메시지를 화면에 표시합니다.

4. 실전 활용 예제

쇼핑몰 장바구니 구현

쇼핑몰 웹사이트에서 사용자가 장바구니에 담은 상품 정보를 로컬 스토리지를 통해 저장할 수 있습니다. 사용자가 페이지를 새로 고침해도 장바구니 정보가 유지됩니다.

<script>
    // 장바구니에 상품 추가
    function addToCart(productId) {
        let cart = JSON.parse(localStorage.getItem('cart')) || []; // 기존 장바구니 정보 불러오기
        cart.push(productId); // 새로운 상품 ID 추가
        localStorage.setItem('cart', JSON.stringify(cart)); // 장바구니를 로컬 스토리지에 저장
    }
</script>

사용자 설정 저장

사용자가 웹사이트에서 선택한 테마나 기본 설정을 로컬 스토리지에 저장하여, 다음 방문 시에도 동일한 설정을 유지할 수 있습니다.

<script>
    // 테마 변경
    function changeTheme(theme) {
        localStorage.setItem('theme', theme); // 선택한 테마 저장
        applyTheme(theme); // 저장된 테마 적용
    }
</script>

5. 흔한 실수와 주의사항

로컬 스토리지 용량 초과:

- 잘못된 코드: localStorage.setItem('key', 'value'.repeat(10000)); - 올바른 코드: 데이터 크기를 체크하여 용량 초과를 방지합니다.

잘못된 데이터 타입 저장:

- 잘못된 코드: localStorage.setItem('data', {name: 'John'}); (객체를 직접 저장) - 올바른 코드: localStorage.setItem('data', JSON.stringify({name: 'John'})); (객체를 문자열로 변환하여 저장)

데이터 삭제 고려 부족:

- 잘못된 코드: localStorage.clear(); (모든 데이터를 삭제) - 올바른 코드: localStorage.removeItem('username'); (특정 데이터만 삭제)

6. 정리

로컬 스토리지는 클라이언트 측 데이터를 영구적으로 저장할 수 있는 방법입니다.
Key-Value Pair 방식으로 데이터를 저장하며, 사용자가 이전 데이터를 기억할 수 있게 도와줍니다.
실무에서 장바구니와 사용자 설정 저장에 자주 활용됩니다.

다음에 학습하면 좋은 주제

세션 스토리지 (Session Storage)
IndexedDB (비정형 데이터 저장소)
웹 애플리케이션의 성능 최적화 방법

학습