[JS] 브라우저 저장소(LocalStorage, Cookie, SessionStorage, IndexedDB)

 

 

 

 

 

✅ LocalStorage

• 클라이언트 측에서 데이터를 영구적으로 저장할 때 사용 → 브라우저를 닫아도 데이터가 유지됨
• 데이터는 문자열 형태로 저장되며, Javscript의 JSON.stringify나 JSON.parse를 통해 객체로 변환 가능
• 동일한 도메인의 여러 페이지 간에 데이터를 공유할 수 있음
• 사용이 간편
• 대부분의 브라우저에서는 약 5MB 정도의 용량 제한이 있음
• 복잡한 데이터 구조에는 부적합
• 자동 로그인 등에 사용됨

 

myStorage = window.localStorage;
localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat');
localStorage.removeItem('myCat');
localStorage.clear();

 

 

 

 

 

 

✅ Cookie

• 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장함
• 팝업창 다시 보지 않음 기능에 사용됨
• https://ko.javascript.info/cookie

쿠키와 document.cookie

// 쿠키 읽기
alert( document.cookie );

// 쿠키 쓰기
document.cookie = "user=John"; // 이름이 'user'인 쿠키의 값만 갱신함
alert(document.cookie); // 모든 쿠키 보여주기

 

 

 

 

 

 

✅ SessionStorage

• 클라이언트 측에서 임시 데이터를 저장하는 데 사용
• 현재 브라우저 세션 동안 유지되고, 브라우저를 닫으면 데이터가 삭제됨
  • 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아 있음
  • 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성
• localStorage와 마찬가지로 도메인 레벨로 데이터가 구분되며, 동일한 도메인에서 여러 페이지에 결쳐 사용 가능
• 장기적인 데이터 보존에는 부적합
• 입력폼 정보 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기 등에 사용

myStorage = window.sessionStorage;
sessionStorage.setItem('myCat', 'Tom');
sessionStorage.getItem("autosave")

 

 

 

 

 

 

✅ IndexedDB

• 클라이언트 측에서 구조화된 데이터를 비동기적으로 저장하고 검색하기 위한 데이터베이스 시스템
• 키-값 쌍의 객체로 저장하며, 복잡한 쿼리와 인덱싱을 지원 → 대량의 데이터를 효율적으로 처리
• 대량의 데이터를 저장할 수 있으며, 브라우저마다 용량 제한이 다르지만 일반적으로 몇십 메가바이트에서 여러 기가바이트까지 데이터를 저장할 수 있음
• 다른 저장소에 비해 사용하기 복잡한 편(초기 설정, 트랜잭션 관리, 객체 스토어 구성 등을 다뤄야 함)
• 최신 웹 기술이라서 모든 브라우저에 완전히 지원되지 않음 → 크로스 브라우징을 위해 처리가 필요