로컬 저장소와 세션 저장소: 각각을 사용하는 경우(미니 프로젝트 포함)

웹 애플리케이션에서 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  {
    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;
    }
});

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

올바른 선택

본문으로 들어가 보겠습니다. 스토리지 결정을 내리는 데 필요한 사항은 다음과 같습니다.

다음과 같은 경우에 localStorage를 선택하세요.

• 사용자는 자신의 데이터가 지속되기를 기대합니다(예: 저장된 기본 설정)
• 자주 변경되지 않는 데이터를 캐싱하고 있습니다
• 탭 간 데이터 공유가 필요합니다
• 데이터의 최신성보다 사용자 편의성이 더 중요합니다

다음과 같은 경우에 sessionStorage를 사용하세요.

• 데이터는 일시적이어야 합니다
• 민감한 임시 토큰을 취급하고 있습니다
• 각 탭에는 자체 격리 상태가 필요합니다
• 다시 시작 시 깨끗한 상태를 보장받고 싶습니다

실제로 중요한 성능 팁:

• 대용량 개체를 저장하지 마세요. 두 저장소 유형 모두 동기식입니다
• 가능한 경우 저장 작업을 일괄적으로 처리하세요
• 5~10MB 제한을 기억하세요
• 항상 저장 오류 처리(사용자가 비활성화했을 수 있음)

일반적인 문제:

• 저장하기 전에 항상 객체를 문자열화하세요
• 저장용량이 있다고 가정하지 마세요
• 멀티탭 시나리오에서 저장 이벤트 주의
• 오래되거나 사용하지 않는 데이터를 정리하는 것을 잊지 마세요

최종 생각: 올바른 작업에 적합한 도구를 선택하세요. localStorage가 단지 지속성 때문에 항상 더 나은 것은 아니며, sessionStorage가 단지 더 깨끗하다고 ​​해서 항상 더 나은 것은 아닙니다. 사용자의 요구 사항을 먼저 생각하십시오.

의심스러운 경우 스스로에게 질문해 보세요.
"이 데이터는 브라우저를 다시 시작해도 유지됩니까?"

• 예 → 로컬 저장소
• 아니요 → 세션스토리지

올바른 선택을 하기 위해 알아야 할 전부입니다. 만들기 시작하세요!

위 내용은 로컬 저장소와 세션 저장소: 각각을 사용하는 경우(미니 프로젝트 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!