icon안동민 개발노트

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

 웹 스토리지(Web Storage)는 클라이언트 측에서 데이터를 저장할 수 있는 웹 애플리케이션 기술입니다.

 이 절에서는 로컬 스토리지와 세션 스토리지의 개념, 사용법, 그리고 실제 적용에 대해 자세히 알아보겠습니다.

웹 스토리지의 개념과 배경

 웹 스토리지는 HTML5에서 도입되었으며, 기존 쿠키의 한계를 극복하기 위해 설계되었습니다.

 쿠키와의 주요 차이점

  • 더 큰 저장 용량 (일반적으로 5MB 이상)
  • 서버로 자동 전송되지 않음 (네트워크 트래픽 감소)
  • 더 나은 보안성과 사용 편의성

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

 1. 로컬 스토리지

  • 데이터 영구 저장
  • 브라우저를 닫아도 데이터 유지
  • 도메인 별로 저장

 2. 세션 스토리지

  • 세션 동안만 데이터 유지
  • 탭/창을 닫으면 데이터 삭제
  • 각 탭/창마다 독립적인 저장소

 용량 제한 : 브라우저에 따라 다르지만, 일반적으로 5-10MB

기본 사용법

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

  1. 데이터 저장
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
  1. 데이터 조회
const value = localStorage.getItem('key');
const value = sessionStorage.getItem('key');
  1. 데이터 삭제
localStorage.removeItem('key');
sessionStorage.removeItem('key');
  1. 모든 데이터 삭제
localStorage.clear();
sessionStorage.clear();

복잡한 데이터 구조 저장

 객체나 배열을 저장할 때는 JSON을 사용합니다.

// 저장
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
 
// 조회
const storedUser = JSON.parse(localStorage.getItem('user'));

 주의점 : JSON은 함수나 undefined를 저장할 수 없습니다.

스토리지 이벤트

 다른 탭/창에서 로컬 스토리지가 변경될 때 이벤트를 감지할 수 있습니다.

window.addEventListener('storage', function(e) {
  console.log('Storage changed:', e.key, e.oldValue, e.newValue);
});

 이를 통해 탭 간 통신이 가능합니다.

보안 고려사항

  1. XSS 취약점 : 스토리지 데이터는 XSS 공격에 취약할 수 있으므로, 사용자 입력 데이터는 반드시 검증 및 이스케이프 처리해야 합니다.
  2. 민감한 정보 : 암호나 개인 식별 정보 등 민감한 데이터는 웹 스토리지에 저장하지 않는 것이 좋습니다.
  3. HTTPS 사용 : 중요한 데이터를 다룰 때는 반드시 HTTPS를 사용해야 합니다.

활용 사례

  1. 사용자 설정 저장
// 테마 설정 저장
localStorage.setItem('theme', 'dark');
 
// 테마 설정 불러오기
const theme = localStorage.getItem('theme') || 'light';
applyTheme(theme);
  1. 폼 데이터 임시 저장
// 폼 데이터 저장
function saveFormData() {
   const formData = {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value
   };
   sessionStorage.setItem('formData', JSON.stringify(formData));
}
 
// 페이지 로드 시 저장된 데이터 복원
function loadFormData() {
   const storedData = sessionStorage.getItem('formData');
   if (storedData) {
      const formData = JSON.parse(storedData);
      document.getElementById('name').value = formData.name;
      document.getElementById('email').value = formData.email;
   }
}
  1. 캐싱
async function fetchData(url) {
   const cachedData = localStorage.getItem(url);
   if (cachedData) {
      return JSON.parse(cachedData);
   }
 
   const response = await fetch(url);
   const data = await response.json();
   localStorage.setItem(url, JSON.stringify(data));
   return data;
}

웹 스토리지의 한계와 대안

 한계

  • 동기적 API (대용량 데이터 처리 시 성능 이슈 가능)
  • 복잡한 쿼리나 인덱싱 불가능
  • 제한된 저장 용량

 대안

  1. IndexedDB : 대용량 구조화 데이터 저장에 적합, 비동기 API 제공
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
   const db = event.target.result;
   // 데이터베이스 사용
};
  1. WebSQL : SQL 기반 데이터베이스 (현재 사용 중단, 권장되지 않음)
  2. Cache API : 네트워크 요청과 응답을 캐싱하는 데 사용
caches.open('my-cache').then(cache => {
   cache.add('/api/data');
});

 웹 스토리지는 클라이언트 측 데이터 저장의 간단하고 효과적인 방법을 제공합니다. 로컬 스토리지와 세션 스토리지는 각각 고유한 특성을 가지고 있어, 상황에 따라 적절히 선택하여 사용할 수 있습니다.

 로컬 스토리지는 장기간 데이터 보존이 필요한 경우에 유용합니다. 예를 들어, 사용자 설정, 테마 선택, 장바구니 정보 등을 저장하는 데 적합합니다. 반면 세션 스토리지는 임시 데이터 저장에 적합하며, 멀티 탭 환경에서 각 탭의 독립성을 유지해야 할 때 유용합니다.

 웹 스토리지를 사용할 때는 보안에 특별히 주의를 기울여야 합니다. XSS 공격에 취약할 수 있으므로, 저장된 데이터를 사용할 때는 항상 적절한 검증과 이스케이프 처리가 필요합니다. 또한, 민감한 개인 정보나 인증 정보는 웹 스토리지에 저장하지 않는 것이 좋습니다.

 웹 스토리지는 간단한 키-값 저장소이기 때문에, 복잡한 데이터 구조를 다룰 때는 JSON을 활용하여 직렬화/역직렬화 과정을 거쳐야 합니다. 이 과정에서 함수나 undefined 같은 특수한 값들은 손실될 수 있으므로 주의가 필요합니다.

 대규모 데이터나 복잡한 쿼리가 필요한 경우, IndexedDB나 Cache API 같은 대안을 고려해볼 수 있습니다. 이들은 더 강력한 기능을 제공하지만, 사용법이 더 복잡하고 브라우저 지원 범위가 다를 수 있습니다.

 결론적으로, 웹 스토리지는 웹 애플리케이션의 사용자 경험을 향상시키는 강력한 도구입니다. 적절히 사용하면 오프라인 기능, 성능 최적화, 사용자 맞춤 설정 등 다양한 기능을 구현할 수 있습니다. 그러나 그 한계와 보안 위험을 인식하고, 상황에 맞는 최적의 솔루션을 선택하는 것이 중요합니다.

이전으로다음으로