January 22, 2025

localStorage와 sessionStorage

답변 확인

HTML5는 클라이언트 측 데이터 저장을 간편하게 처리하기 위해 Web Storage API를 제공 localStorage와 sessionStorage는 데이터 저장 및 관리에 유용하며, 두 저장소는 사용 방식이 비슷하지만 데이터 유효기간과 범위에 차이가 있음

1. 공통점

클라이언트 측 데이터 저장

브라우저에서 데이터를 키-값 쌍으로 저장
서버와 독립적으로 동작

API 사용법

setItem(key, value): 데이터 저장
getItem(key) : 데이터 조회
removeItem(key) : 특정 데이터 삭제
clear() : 모든 데이터 삭제

저장 용량 제한

일반적으로 약 5MB(브라우저마다 다름)

데이터 형식

값은 문자열로 저장되므로, 객체나 배열은 JSON으로 변환 후 저장

// 객체 저장 및 불러오기 예제
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
 
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // "Alice"

2.차이점

특징	`localStorage`	`sessionStorage`
유효기간	영구적 (브라우저를 종료해도 데이터 유지)	세션 동안만 유효 (탭 또는 브라우저 종료시 데이터 삭제)
범위(Scope)	모든 탭과 창에서 공유	탭 단위로 독립적 (다른 탭/창 과 데이터 공유 불가)
데이터 사용 목적	장기 데이터 저장 (예: 사용자 설정, 인증 토큰)	임시 데이터 저장 (예: 폼 데이터, 검색 조건)
용량 제한	약 5MB	약 5MB
소멸 시점	명시적으로 삭제 해야함 `(removeItem, clear 사용)`	세션 종료 시 자동 삭제
이벤트 지원	`storage` 이벤트 발생	`storage` 이벤트 발생

3. `sessionStorage` 에서 세션의 의미

sessionStorage의 세션은 탭 단위로 정의됨
- 동일 브라우저에서 새 탭을 열면, sessionStorage 데이터는 공유되지 않음
- 일반적인 세션(브라우저 전체 범위)과 다르며, 탭 단위의 독립성을 보장함

sessionStorage.setItem('tabData', '123');
 
// 같은 브라우저의 다른 탭에서는 접근 불가
console.log(sessionStorage.getItem('tabData')); // null

4. 쿠키와 비교

특징	쿠키 (Cookie)	Web Storage (localStorage/sessionStorage)
저장 위치	클라이언트와 서버 모두 사용 가능	클라이언트에서만 사용
데이터 용량 제한	약 4KB	약 5MB
데이터 형식	문자열만 저장 가능	문자열 및 JSON 형식 지원
유효 기간 설정	가능 (만료 시간 설정 가능)	불가능 (localStorage는 영구적, sessionStorage는 세션 종료 시 삭제)
보안	HTTP 요청 시 자동 전송	자동 전송되지 않음 (XSS에 취약할 수 있음)
사용 사례	세션 ID, 인증 정보, 사용자 설정	인증 토큰, 클라이언트 설정, 폼 데이터

5. `LocalStorage`와 `SessionStorage` 예제

1. localStorage 사용 예제: 다크 모드 설정 저장

다크 모드 선택시, localStorage를 이용해 설정을 저장하고 브라우저를 다시 열어도 유지되도록 만듬

// 다크 모드 토글 함수
function toggleDarkMode() {
    const isDarkMode = document.body.classList.toggle('dark-mode');
    localStorage.setItem('darkMode', isDarkMode); // 설정 저장
}
 
// 브라우저 로드 시 다크 모드 설정 적용
document.addEventListener('DOMContentLoaded', () => {
    const savedMode = localStorage.getItem('darkMode');
    if (savedMode === 'true') {
        document.body.classList.add('dark-mode');
    }
});
 
// 버튼 클릭 이벤트
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);

2. SessionStorage 예제: 검색 필터 저장

쇼핑몰에서 사용자가 검색 조건을 설정하고 페이지를 이동할 때 ,필터가 유지되도록 sessionStorage를 활용

// 필터 조건 저장
function saveFilterSettings() {
    const filters = {
        category: document.getElementById('category').value,
        priceRange: document.getElementById('priceRange').value,
    };
    sessionStorage.setItem('filters', JSON.stringify(filters)); // 필터를 JSON으로 저장
}
 
// 필터 조건 불러오기
function applyFilterSettings() {
    const savedFilters = sessionStorage.getItem('filters');
    if (savedFilters) {
        const filters = JSON.parse(savedFilters);
        document.getElementById('category').value = filters.category;
        document.getElementById('priceRange').value = filters.priceRange;
    }
}
 
// 페이지 로드 시 필터 적용
document.addEventListener('DOMContentLoaded', applyFilterSettings);
 
// 필터 변경 이벤트
document.getElementById('category').addEventListener('change', saveFilterSettings);
document.getElementById('priceRange').addEventListener('change', saveFilterSettings);

3. 비교 및 사용 시점

LocalStorage: 브라우저를 닫아도 유지되는 설정(예: 다크 모드, 언어 설정).
SessionStorage: 현재 세션 동안만 유지되는 데이터(예: 검색 필터, 일시적인 폼 데이터).

5. `Storage` 이벤트

동작 localStorage또는 sessionStorage데이터가 변경될 때 발생
속성 :
- key: 변경된 데이터의 키
- oldValue: 변경 전 값
- newValue: 변경 후 값
- url: 데이터가 변경된 문서 URL
- storageArea : 변경된 저장소 객체(localStorage 또는 sessionStorage)

window.addEventListener('storage', (event) => {
    console.log('Key:', event.key);
    console.log('Old Value:', event.oldValue);
    console.log('New Value:', event.newValue);
    console.log('URL:', event.url);
});

활용 사례

실시간 데이터 동기화
- 쇼핑몰 장바구니, 로그인 상태 동기화
- 대시보드 설정 변경 실시간 반영
탭 간 메시지 교환
- 동일 도메인에서 탭 간 데이터 전달
로컬 이벤트 처리 :
- 한 탭에서의 데이터를 기반으로 다른 탭의 UI 업데이트

주의사항

sessionStorage는 탭 간 데이터 공유가 불가능하므로, storage 이벤트는 localStorage에서 주로 사용함
민감한 데이터는 XSS(교차 사이트 스크립팅)에 취약할 수 있으므로 저장에 주의해야 함

6. 장점 요약

쿠키보다 효율적
- 용량이 더 크고, 자동으로 서버에 데이터를 전송하지 않아 HTTP 요청 크기를 줄임
- 클라이언트 데이터 저장 및 관리에 적합
세션 관리 개선
- sessionStorage는 탭 단위로 데이터를 분리하여 보안성과 독립성을 강화
이벤트 기반 동작
- 데이터 변경 시 storage 이벤트로 반응 가능

결론

localStorage: 장기 데이터 저장(사용자 설정, 장기 상태 데이터)
sessionStorage: 세션 동안만 필요한 임시 데이터 저장(폼 데이터, 필터 조건)
cookie : 클라이언트와 서버 간 데이터 교환 (로그인 세션, 추적 데이터, 만료시간)

사용 선택 기준

클라이언트 중심 데이터 -> localStorage 또는 sessionStorage
서버와 동기화가 필요한 데이터 -> 쿠키
데이터 유효 기간 :
- 만료 시간이 중요하면 쿠키
- 영구적 또는 세션 단위 저장이면 Web Storage