로컬 저장소와 세션 저장소: 각각을 사용하는 경우(미니 프로젝트 포함)-JS 튜토리얼-php.cn

Local Storage vs Session Storage: When to Use Each (With Mini Projects)

웹 애플리케이션에서 localStorage를 사용해야 할지 아니면 sessionStorage를 사용해야 할지 궁금한 적이 있나요? 당신은 혼자가 아닙니다!

나도 거기에 가본 적이 있는데, 두 가지 스토리지 옵션 중 내 사용 사례에 어떤 것이 이상적인지 궁금했습니다.

웹 저장소는 웹 개발에서 가장 매력적인 부분은 아니지만 실제로 무언가를 수행하는 최신 웹 애플리케이션을 구축하는 데 필수적입니다.

사용자 기본 설정을 저장하고 양식 데이터 또는 장바구니로 작업하려면 사용 사례에 적합한 저장 방법을 결정해야 합니다.

이론이 너무 많고 때로는 이론이 혼란스러울 수 있기 때문에 모든 세부 사항을 설명하고 싶지 않습니다. 실제 코드 예제를 통해 두 저장소를 모두 보여드리겠습니다.

언제 어떤 솔루션을 적용해야 하는지는 이 포스팅의 마지막 부분에서 확인하실 수 있습니다...

그러니 저와 함께하세요!

기본 사항: 실제로 알아야 할 사항

localStorage는 노트북과 같고 sessionStorage는 스티커 메모 더미와 같습니다. 노트는 페이지를 찢을 때까지(데이터 지우기) 계속 남아 있으며, 스티커 메모는 책상 서랍을 닫을 때(세션 종료) 버려집니다.

몇 가지 공통점은 다음과 같습니다.

둘 다 키 값 형식으로 데이터를 저장합니다.
약 5~10MB의 저장 공간을 제공합니다(브라우저에 따라 다름)
동기식이며 문자열만 저장합니다(예, 객체에도 JSON 변환이 필요합니다)
동일한 간단한 API를 통해 액세스됩니다.

이제 차이점은 다음과 같습니다.

로컬스토리지:

수동으로 지울 때까지 유지됩니다
브라우저 탭과 창 전체에서 데이터 유지
사용자 기본 설정이나 저장된 게임 상태 등을 너무 오랫동안 유지하지 마세요

세션스토리지:

브라우저 탭을 닫으면 사라집니다.
작업 중인 특정 탭에만 격리됨
지속되어서는 안 되는 임시 데이터(예: 양식 상태 또는 일회성 토큰)에 적합합니다.

참고 사항: 두 저장소 유형 모두 프런트엔드 전용입니다. 여기서는 민감한 데이터로 작업하지 마세요. 이것이 바로 보안 백엔드 스토리지의 목적입니다.

localStorage 심층 분석

솔직히 말하면, 아마도 이 스토리지를 대부분의 시간 동안 사용할 것이며 그럴 만한 이유가 있을 것입니다. 브라우저 세션 사이에 데이터를 보관해야 하는 경우 localStorage보다 더 나은 선택은 없습니다.

localStorage의 우수 사용 사례:

테마 환경설정(어두움/밝음 모드)
장바구니 상품
사용자 언어 설정
게임 진행
캐시된 API 응답

빠른 알림 - 너무 많은 개발자가 다음을 어렵게 배우는 것을 보았습니다.

민감한 데이터를 여기에 저장하지 마세요(안전하지 않음)
저장 용량 제한에 주의하세요
저장하기 전에 JSON.stringify를 사용해야 한다는 점을 기억하세요
만료에 주의하세요 - localStorage는 자동으로 만료되지 않습니다

아주 간단한 테마 전환기로 구체적인 예를 들어보겠습니다.

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved theme on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
        themeToggle.checked = savedTheme === 'dark-mode';
    }
});

// Handle theme changes
themeToggle.addEventListener('change', () => {
    if (themeToggle.checked) {
        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    } else {
        body.classList.remove('dark-mode');
        localStorage.setItem('theme', 'light-mode');
    }
});

로그인 후 복사

이 코드는 매우 간단합니다. 사용자가 선호하는 테마를 저장하고 사용자가 다시 방문할 때마다 자동으로 적용됩니다. 화려함은 없지만 실용적입니다.

세션스토리지

때때로 잠시 동안 데이터를 유지해야 할 때가 있습니다. 바로 그런 경우에 sessionStorage가 빛을 발합니다.

사용자가 브라우저 탭을 닫을 때까지, 단 1초도 더 이상 무언가를 추적하고 싶지 않은 경우를 생각해 보세요.

sessionStorage를 위한 완벽한 시나리오:

다단계 양식 데이터
임시 인증 토큰
단일 세션 사용자 기본 설정
긴 글의 페이지 위치
마법사 또는 튜토리얼 진행

sessionStorage가 실제로 작동하는 모습을 보여주는 다단계 양식 코드는 다음과 같습니다.

// Multi-Step Form Mini-Project
const formSteps = {
    saveStep(stepNumber, data) {
        sessionStorage.setItem(`formStep${stepNumber}`, JSON.stringify(data));
    },

    loadStep(stepNumber) {
        const savedData = sessionStorage.getItem(`formStep${stepNumber}`);
        return savedData ? JSON.parse(savedData) : null;
    },

    clearForm() {
        // Clear only our form data, not other sessionStorage items
        for (let i = 1; i <= 3; i++) {
            sessionStorage.removeItem(`formStep${i}`);
        }
    }
};

// Example usage in form steps
document.getElementById('step1-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    formSteps.saveStep(1, data);
    // Move to next step
});

// Load saved data when user returns to a step
window.addEventListener('load', () => {
    const step1Data = formSteps.loadStep(1);
    if (step1Data) {
        document.getElementById('name').value = step1Data.name;
        document.getElementById('email').value = step1Data.email;
    }
});

로그인 후 복사

여기서 중요한 점은 누군가 실수로 탭을 닫으면 새로 시작된다는 것입니다. 오래된 데이터가 남아 있지 않습니다. 하지만 단지 단계 사이를 탐색하는 것뿐이라면 진행 상황은 안전합니다.