🌐 웹 스토리지(Web Storage)란?

🌐 웹 스토리지(Web Storage)란?

 

웹 스토리지(Web Storage)는 브라우저에 데이터를 로컬로 저장할 수 있도록 제공되는 클라이언트 측 저장소입니다. 이전에 널리 사용되던 **쿠키(Cookies)**의 대안으로 설계되었으며, 더 많은 데이터 저장 용량과 단순한 API를 제공합니다. 이번 글에서는 웹 스토리지의 개념, 특징, 종류, 그리고 사용법을 자세히 살펴보겠습니다!

웹 스토리지란? 🛠️

 

웹 스토리지는 HTML5에서 도입된 브라우저 기반의 데이터 저장소로, LocalStorage와 SessionStorage 두 가지 형태로 제공됩니다.

• 정의: 키-값(key-value) 쌍으로 데이터를 저장하고, 클라이언트(사용자 브라우저) 측에서 데이터를 관리.

• 용도: 사용자 세션 정보, 애플리케이션 설정, UI 상태 등을 저장.

 

웹 스토리지의 주요 특징

 

1️⃣ 서버와 독립적:

웹 스토리지는 클라이언트 측에서만 데이터를 저장하므로 서버로 전송되지 않습니다.

 

2️⃣ 크기 제한 증가:

• 쿠키: 4KB 제한

• 웹 스토리지: 최대 5~10MB(브라우저에 따라 다름)

 

3️⃣ 간단한 사용법:

• 키-값 쌍으로 데이터를 저장하며, 쿠키보다 훨씬 직관적인 API 제공.

 

4️⃣ 보안 강화:

• HTTPS와 함께 사용할 경우, 데이터 탈취 위험 감소.

웹 스토리지의 종류

 

웹 스토리지는 두 가지 유형으로 나뉩니다:

 

1. LocalStorage

• 특징:

• 브라우저에 데이터를 영구적으로 저장.

• 브라우저 또는 탭을 종료해도 데이터가 유지됩니다.

• 주요 사용 사례:

• 사용자 설정 저장(예: 테마, 언어)

• 장바구니 데이터 유지

 

사용 예제

// 데이터 저장
localStorage.setItem('theme', 'dark');

// 데이터 읽기
const theme = localStorage.getItem('theme');
console.log(theme); // "dark"

// 데이터 삭제
localStorage.removeItem('theme');

// 모든 데이터 초기화
localStorage.clear();

2. SessionStorage

• 특징:

• 브라우저 세션 동안만 데이터 저장.

• 브라우저 또는 탭을 닫으면 데이터가 삭제됩니다.

• 주요 사용 사례:

• 현재 사용자의 세션 상태 관리

• 단기적인 UI 상태 저장

 

사용 예제

// 데이터 저장
sessionStorage.setItem('isLoggedIn', 'true');

// 데이터 읽기
const isLoggedIn = sessionStorage.getItem('isLoggedIn');
console.log(isLoggedIn); // "true"

// 데이터 삭제
sessionStorage.removeItem('isLoggedIn');

// 모든 데이터 초기화
sessionStorage.clear();

웹 스토리지 vs 쿠키

특징웹 스토리지쿠키

데이터 크기 제한	5~10MB	4KB
서버 요청 포함 여부	포함되지 않음	포함됨 (자동 전송)
데이터 수동 전송	수동 전송	서버 요청 시 자동 전송
만료 시간	LocalStorage는 영구 저장	만료 시간 설정 가능
사용 편의성	직관적 API 제공	복잡한 설정 필요

웹 스토리지의 사용 사례

 

1️⃣ 사용자 환경 설정 저장

localStorage.setItem('preferredLanguage', 'en');

2️⃣ 장바구니 상태 유지

const cartItems = ['item1', 'item2', 'item3'];
localStorage.setItem('cart', JSON.stringify(cartItems));

3️⃣ 세션 상태 관리

sessionStorage.setItem('currentUser', JSON.stringify({ id: 1, name: 'Alice' }));

웹 스토리지의 한계와 주의점

 

1. 보안 이슈

 

웹 스토리지는 클라이언트 측에 저장되므로 XSS(Cross-Site Scripting) 공격에 취약합니다.

• 해결 방법:

• HTTPS 사용

• 민감한 데이터는 서버에 저장

• HTML 인코딩 및 정적 파일 검사

 

2. 데이터 크기 제한

 

브라우저마다 지원하는 최대 용량이 다르므로, 데이터를 저장하기 전에 브라우저 호환성을 확인해야 합니다.

 

3. 브라우저 의존성

 

웹 스토리지는 브라우저 기반이므로 사용자가 브라우저를 변경하거나 로컬 데이터를 삭제하면 데이터가 유실될 수 있습니다.

웹 스토리지 활용 팁

 

1️⃣ JSON으로 데이터 관리

웹 스토리지는 기본적으로 문자열 형태로 데이터를 저장하므로, 복잡한 데이터를 저장할 때는 JSON 형식이 유용합니다.

const user = { id: 1, name: 'John' };
localStorage.setItem('user', JSON.stringify(user));

const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // "John"

2️⃣ 효율적인 키 관리

• 데이터 저장 시 고유한 키를 사용하여 충돌을 방지합니다.

localStorage.setItem('myApp:settings', JSON.stringify({ theme: 'dark' }));

3️⃣ 데이터 정리 습관화

• 필요하지 않은 데이터는 clear()를 사용하여 정리합니다.

결론: 웹 스토리지, 언제 사용할까?

 

웹 스토리지는 사용자 경험을 향상시키고 서버 부하를 줄이는 데 효과적입니다.

• LocalStorage: 영구 데이터 저장이 필요할 때.

• SessionStorage: 세션 상태를 유지해야 할 때.

단, 민감한 데이터는 항상 서버에 저장하고, 보안을 최우선으로 고려해야 합니다.

 

🌷 전설의 개발자가 되어봅시당! 🌷