웹 스토리지 (React.js)

웹 스토리지(Web Storage)

웹 애플리케이션이 클라이언트(브라우저)에 데이터를 저장할 수 있게 해주는 API
로컬 스토리지와 세션 스토리지 두 가지 형태가 있음

 

 

로컬 스토리지(Local Storage)

브라우저 세션과 관계 없이 영구적으로 데이터를 저장함 -> 사용자가 브라우저를 종료해도 저장된 데이터는 남아있음.
사용자 로그인 유지 or 기본 설정 저장 시 활용

// 저장
localStorage.setItem('key', 'value');

// 조회
let value = localStorage.getItem('key');

// 삭제
localStorage.removeItem('key');

 

 

세션 스토리지(Session Storage)

브라우저 세션 동안(브라우저 탭이 열려있는 동안)만 데이터 저장.
일회성 로그인 정보 저장, 멀티 페이지 폼에서 임시 데이터 유지, 탭 별 독립적인 데이터 관리 등에 활용

• 세션 종료 시 데이터 삭제
• 같은 도메인인 경우 같은 브라우저 탭에서만 접근 가능

// 데이터 저장(key , value)
sessionStorage.setItem('username', 'John');

// 데이터 조회  
let username = sessionStorage.getItem('username');

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

// 모든 데이터 삭제  
sessionStorage.clear();

// 폼 데이터 임시 저장  
document.querySelector('form').addEventListener('input', function(e) {  
sessionStorage.setItem(e.target.id, e.target.value);  
});

// 페이지 로드 시 저장된 데이터 복원  
window.addEventListener('load', function() {  
document.querySelectorAll('form input').forEach(input => {  
input.value = sessionStorage.getItem(input.id) || '';  
});  
});