로컬 스토리지와 세션 스토리지

지난 절에서는 웹 애플리케이션이 Fetch API를 통해 서버와 비동기적으로 통신하는 방법을 다뤘습니다.

서버에서 데이터를 받아 화면에 반영하는 흐름은 중요하지만, 상황에 따라서는 서버를 거치지 않고 클라이언트(브라우저) 내부에 데이터를 저장해야 합니다.

대표적으로 로그인 상태 유지, 설정 정보 저장, 장바구니 임시 보관, 오프라인 지원 같은 기능이 여기에 해당합니다.

과거에는 이런 클라이언트 저장 용도로 쿠키(Cookie)를 많이 사용했습니다.

하지만 쿠키는 용량 제한(약 4KB), 도메인·경로·보안 정책에 맞는 HTTP 요청에 자동 전송되는 오버헤드, 다루기 불편한 API 같은 한계가 있습니다.

HTML 표준의 웹 스토리지(Web Storage) API는 이 한계를 보완하며, 더 큰 저장 용량과 단순한 API를 제공합니다.

웹 스토리지 API는 크게 두 가지 유형을 제공합니다.

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage).

이 글에서는 두 스토리지의 특징과 사용법, 그리고 실제 적용 시나리오를 순서대로 정리합니다.

웹 스토리지 (Web Storage) 개요

웹 스토리지는 클라이언트 측에서 key-value 형태로 데이터를 저장할 수 있게 해주는 웹 API입니다.

이 API는 동일 출처(Same Origin) 정책을 따르며, 각 출처(도메인, 프로토콜, 포트)마다 별도의 저장 공간을 가집니다.

즉, example.com에서 저장한 데이터는 another.com에서 접근할 수 없습니다.

두 가지 주요 웹 스토리지 객체는 전역 Window 객체의 프로퍼티로 제공됩니다.

• window.localStorage
• window.sessionStorage

이 두 객체는 동일한 메서드와 프로퍼티를 제공하지만, 데이터의 지속성(persistence)에서 차이가 있습니다.

앞의 브라우저 저장소 선택 계약 다이어그램은 저장 위치를 고를 때 먼저 확인해야 하는 기준을 요약합니다.

로컬 스토리지 (Local Storage)

로컬 스토리지는 브라우저를 닫았다가 다시 열어도 데이터가 유지되는 명시적인 만료 시간이 없는 저장소입니다.

사용자·브라우저의 사이트 데이터 삭제나 저장 정책에 따라 제거될 수 있으므로 영구 보존을 보장하지는 않습니다.

• 지속성: 명시적 만료 없음 (일반적으로 종료 후 유지)
• 만료 기간: 없음 (수동 삭제 필요)
• 용량: 출처당 약 5MB ~ 10MB (브라우저마다 다름)
• 접근성: 동일 출처의 모든 탭/창에서 접근 가능
• 데이터 형식: 문자열(string)만 저장 가능

로컬 스토리지 사용법

localStorage 객체는 setItem(), getItem(), removeItem(), clear(), key() 등의 메서드를 제공합니다.

// 문자열 저장
localStorage.setItem('username', 'Alice');
localStorage.setItem('theme', 'dark');

// 객체 저장 (JSON.stringify 사용)
const userSettings = {
    notifications: true,
    language: 'ko'
};
localStorage.setItem('settings', JSON.stringify(userSettings));

console.log("로컬 스토리지에 데이터 저장됨.");

const storedUsername = localStorage.getItem('username');
console.log("저장된 사용자 이름:", storedUsername); // 결과: Alice

const storedTheme = localStorage.getItem('theme');
console.log("저장된 테마:", storedTheme);     // 결과: dark

// 객체 조회 (JSON.parse 사용)
const storedSettings = localStorage.getItem('settings');
if (storedSettings) {
    const parsedSettings = JSON.parse(storedSettings);
    console.log("저장된 설정:", parsedSettings); // 결과: {notifications: true, language: 'ko'}
}

localStorage.removeItem('theme');
console.log("테마 데이터 삭제됨.");
console.log("남은 사용자 이름:", localStorage.getItem('username')); // 결과: Alice
console.log("삭제된 테마:", localStorage.getItem('theme'));     // 결과: null

localStorage.clear();
console.log("모든 로컬 스토리지 데이터 삭제됨.");
console.log("사용자 이름:", localStorage.getItem('username')); // 결과: null

localStorage.setItem('fruit', 'apple');
localStorage.setItem('drink', 'water');

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}
/*
결과 예시:
fruit: apple
drink: water
*/

// 또는 for...in 루프 (비권장: 프로토타입 체인의 속성도 포함될 수 있음)
// for (let key in localStorage) {
//     if (localStorage.hasOwnProperty(key)) {
//         console.log(`${key}: ${localStorage.getItem(key)}`);
//     }
// }

로컬 스토리지 활용 시나리오

• 사용자 설정 저장: 테마(다크 모드/라이트 모드), 언어 설정, 알림 설정 등
• 로그인 화면의 비민감 설정: 마지막으로 선택한 표시 옵션 등. 인증 토큰을 저장하면 같은 출처의 JavaScript가 읽을 수 있으므로, 인증 설계에서는 XSS 노출과 HttpOnly 쿠키 등 대안을 검토해야 합니다.
• 장바구니 정보(오프라인 유지): 사용자가 브라우저를 닫아도 장바구니 내용 유지
• 캐싱 데이터: 자주 사용되는 데이터를 클라이언트에 저장하여 서버 요청 감소 (API 응답 캐싱)

세션 스토리지 (Session Storage)

세션 스토리지는 로컬 스토리지와 동일한 API를 제공하지만, 데이터가 현재 브라우저 세션 동안만 유지됩니다.

즉, 사용자가 탭이나 브라우저 창을 닫으면 해당 세션 스토리지의 데이터는 자동으로 삭제됩니다.

• 지속성: 세션 동안만 유지 (탭/창 닫으면 삭제)
• 만료 기간: 세션 종료 시 (만료 기간 설정 불가)
• 용량: 출처당 약 5MB ~ 10MB (브라우저마다 다름)
• 접근성: 동일한 탭/창 내에서만 접근 가능 (다른 탭/창에서는 접근 불가, 새로고침은 유지)
• 데이터 형식: 문자열(string)만 저장 가능

세션 스토리지 사용법

로컬 스토리지와 동일한 메서드를 사용합니다.

localStorage 대신 sessionStorage 객체를 사용하면 됩니다.

// 데이터 저장
sessionStorage.setItem('tempMessage', '이 메시지는 현재 세션 동안만 유지됩니다.');
sessionStorage.setItem('lastVisitedPage', '/products/detail/123');

// 데이터 조회
const message = sessionStorage.getItem('tempMessage');
console.log("세션 저장 메시지:", message);

// 데이터 삭제
sessionStorage.removeItem('lastVisitedPage');
sessionStorage.clear(); // 현재 세션의 모든 데이터 삭제

세션 스토리지 활용 시나리오

• 단일 세션 내 임시 데이터: 폼 입력값 임시 저장 (페이지 이동 후 다시 돌아왔을 때), 일회성 알림 메시지
• 단계별 마법사(Wizard) 형식의 데이터: 여러 단계로 이루어진 회원가입 폼에서 각 단계의 입력 데이터를 다음 단계로 넘기기 전까지 임시 저장
• 세션별 사용자 액션 추적: 특정 세션에서만 필요한 사용자 행동 로그

쿠키 (Cookie)와 웹 스토리지 비교 (간략)

로컬 스토리지와 세션 스토리지에서는 저장 위치, 요청 흐름, 화면 전환 결과를 연결합니다.

문자열 설정 저장에는 Web Storage가 편리하고, 서버로 자동 전송하거나 HttpOnly가 필요한 값에는 쿠키가 적합합니다. 용량·수명·접근 주체에 따라 선택합니다.

쿠키는 주로 서버에서 읽고 써야 하는 사용자 인증(세션 ID)이나 트래킹 정보 등에 제한적으로 사용됩니다.

웹 스토리지는 만료 시간을 직접 관리하지 않으므로, 저장 값 안에 버전과 만료 기준을 함께 넣어두면 오래된 데이터가 화면을 망치는 일을 줄일 수 있습니다.

아래 다이어그램은 저장, 복원, 정리, 탭 동기화까지 한 흐름으로 확인하는 기준입니다.

스토리지 활용 요약

이 절에서는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)의 차이를 정리했습니다.

핵심은 지속성 범위입니다.

로컬 스토리지는 브라우저를 다시 열어도 유지되고, 세션 스토리지는 현재 탭/세션 범위에서만 유지됩니다.

또한 두 스토리지가 setItem(), getItem(), removeItem(), clear() 중심의 동일한 API를 제공하지만, 저장 단위가 문자열이라는 제약이 있다는 점도 확인했습니다.

그래서 객체나 배열을 저장할 때는 JSON.stringify()와 JSON.parse()를 함께 사용해야 합니다.

쿠키와 비교하면 웹 스토리지는 저장 용량과 API 사용성이 더 좋고, HTTP 요청마다 데이터가 자동 전송되지 않아 불필요한 트래픽도 줄일 수 있습니다.

다음 절에서는 History API로 URL과 화면 전환을 관리하는 방법을 살펴보겠습니다. 따라하기: 만료는 저장소가 아니라 읽는 코드가 판단합니다

아래 확장은 비민감 화면 설정 하나만 다룹니다. 초기 저장·삭제 예제는 쓰기와 삭제가 허용된 전용 학습 출처에서 실행합니다. 저장 키는 wb9.theme, 데이터는 light 또는 dark, 버전은 1입니다. expiresAt과 현재 시각은 밀리초 정수로 비교하고, 현재 시각이 만료 시각과 같으면 만료로 판정합니다. 이 숫자를 저장한다고 localStorage가 해당 시각에 자동 삭제하지는 않습니다.

const THEME_KEY = 'wb9.theme';

function removeTheme(storage) {
    try { storage.removeItem(THEME_KEY); return true; }
    catch { return false; }
}

function readTheme(storage, now) {
    let raw;
    try { raw = storage.getItem(THEME_KEY); }
    catch { return { state: 'unavailable', theme: 'light' }; }
    if (raw === null) return { state: 'absent', theme: 'light' };
    let saved;
    try { saved = JSON.parse(raw); }
    catch {
        return { state: 'invalid', theme: 'light', removed: removeTheme(storage) };
    }
    const valid = saved !== null && typeof saved === 'object'
        && saved.version === 1 && Number.isSafeInteger(saved.expiresAt)
        && saved.data !== null && typeof saved.data === 'object'
        && (saved.data.theme === 'light' || saved.data.theme === 'dark');
    if (!valid) {
        return { state: 'invalid', theme: 'light', removed: removeTheme(storage) };
    }
    if (now >= saved.expiresAt) {
        return { state: 'expired', theme: 'light', removed: removeTheme(storage) };
    }
    return { state: 'fresh', theme: saved.data.theme };
}

function restoreTheme(now) {
    try { return readTheme(window.localStorage, now); }
    catch { return { state: 'unavailable', theme: 'light' }; }
}

localStorage.setItem(THEME_KEY, JSON.stringify({
    version: 1, expiresAt: 2000, data: { theme: 'dark' }
}));
console.log(readTheme(localStorage, 1000)); // fresh, dark
console.log(readTheme(localStorage, 2000)); // expired, light; 이 키 제거 시도
console.log(readTheme(localStorage, 2001)); // 제거 성공한 저장소라면 absent, light

먼저 저장 값이 있는지, 그다음 JSON 문법과 현재 버전의 형태를 검사합니다. 마지막에 유효 기간을 확인해야 dark를 복원할 수 있습니다. 예제의 작은 시각은 경계를 재현하기 위한 가상 시각입니다. 실제 복원에는 restoreTheme(Date.now())처럼 같은 시간 단위를 사용합니다. restoreTheme의 try는 localStorage 객체를 얻을 때의 예외도 처리하고, readTheme은 얻은 객체의 getItem 예외를 처리합니다. 저장소 접근이나 삭제가 허용되지 않을 수도 있으므로 unavailable과 removed: false를 정상 복원과 구별합니다. 저장 성공·실패 처리는 쓰기 쪽에서도 별도로 확인합니다.

앞의 clear()는 이 출처의 저장소 전체를 지웁니다. 위 코드는 자기 설정 키만 removeItem으로 제거합니다. 원래 clear 예제를 실행할 때에는 다른 앱의 값이 없는 전용 학습 출처를 사용하고, 이 확장을 따라 할 때에는 다른 키가 남아 있는지도 확인하세요. Web Storage의 getItem·삭제·접근 예외 규칙과 앱이 정한 만료 규칙은 서로 다른 책임입니다.

독립 연습

각 경우를 별도로 시작하고 삭제가 가능한 저장소라고 가정합니다. ① 버전 1·theme dark·expiresAt 5000을 저장한 뒤 now 4999로 읽기, ② 같은 값을 now 5000으로 읽기, ③ 유효한 JSON이지만 version 2인 값을 읽기의 상태·theme·해당 키의 남음 여부를 예상하세요. 별도 키 wb9.other는 어느 경우에도 남아야 합니다.