로컬 스토리지

웹 브라우저에 데이터를 영구적으로 저장하는 기술로, Key-Value (문자열) 쌍으로 작동하며 약 5-10MB의 용량을 제공.
사용자의 설정(예: 다크 모드), 비로그인 장바구니, 입력하던 폼 내용 임시 저장 등 다양한 곳에 활용되지만, 비밀번호 같은 민감 정보 저장에는 절대 사용하면 안된다.
쿠키, 세션 스토리지와는 데이터의 만료 기간, 용량, 서버 전송 여부 등에서 뚜렷한 차이점을 가지므로 용도에 맞게 선택.
쿠키는 용량도 작고(4KB) 매번 HTTP 보낼때 서버에 같이 전송되고, 보안적으로 조작되거나 탈취될 위험 있었다.
순수하게 브라우저 (클라이언트) 측에서만 사용할 데이터를 저장하고 사용하기 위한 기술
- 로컬 스토리지 (Local Storage): Like 하드디스크
  - 데이터를 ‘영구적으로’ 저장합니다. 사용자가 직접 데이터를 삭제하거나 브라우저 캐시를 청소하지 않는 한 데이터는 사라지지 않습니다.
세션 스토리지 (Session Storage): Like RAM
- 데이터를 ‘세션 기간’ 동안만 저장합니다. 즉, 브라우저 탭이나 창을 닫으면 데이터가 사라집니다.

특징	설명
데이터 형태	Key-Value 쌍. Key와 Value 모두 반드시 문자열이어야 함.
저장 용량	약 5MB ~ 10MB (브라우저마다 다름). 쿠키(4KB)보다 훨씬 큼.
데이터 만료	영구적. 사용자가 직접 삭제하지 않는 한 데이터가 유지됨.
데이터 범위	오리진(Origin)에 종속적. 프로토콜, 호스트, 포트가 모두 같아야 데이터 공유 가능. (예: `https://a.com`과 `https://b.com`은 데이터 공유 불가, `http://a.com`과 `https://a.com`도 공유 불가)
서버와의 관계	서버로 데이터가 자동 전송되지 않음. 순수하게 클라이언트 측 저장소.
API	동기식(Synchronous)으로 작동. 데이터 요청 시 작업이 끝날 때까지 다른 스크립트 실행이 멈출 수 있음.

구분	로컬 스토리지 (Local Storage)	세션 스토리지 (Session Storage)	쿠키 (Cookie)
만료 시점	영구적 (직접 삭제 전까지)	브라우저 탭/창 닫을 때	지정된 만료일에 만료
용량	큼 (약 5-10MB)	큼 (약 5MB)	작음 (약 4KB)
데이터 범위	오리진(Origin)	오리진 + 탭/창	도메인 및 하위 도메인
서버 전송	전송 안 됨	전송 안 됨	매 HTTP 요청마다 전송
주요 용도	자동 로그인, 사용자 설정, 비로그인 장바구니	일회성 정보, 입력 폼 데이터 임시 저장	로그인 상태 유지(인증)
API	`localStorage.setItem()` 등	`sessionStorage.setItem()` 등	`document.cookie`
[[1-📚 참고 노트/ai 답변/프론트엔드 개발자 필독 로컬 스토리지 A to Z 핸드북#3-로컬-스토리지-사용법-api	3. 로컬 스토리지 사용법 (API)]]

민감한 정보 저장 금지
객체와 배열은 JSON stringify와 parse 사용
동기 식으로 작동해서 너무 많이 쓰면 멈춤
UI 상태 유지: 다크/라이트 모드, 사이드바 열림/닫힘 상태 등 사용자가 설정한 UI 테마나 상태를 저장합니다.
비로그인 장바구니: 로그인하지 않은 사용자가 장바구니에 담은 상품 목록을 저장합니다.
입력 폼 데이터 임시 저장: 사용자가 긴 글을 작성하거나 복잡한 폼을 입력할 때, 페이지를 새로고침하거나 실수로 창을 닫아도 내용이 날아가지 않도록 주기적으로 데이터를 저장합니다.
최근 본 상품 목록: 사용자가 최근에 둘러본 상품이나 콘텐츠 목록을 보여줍니다.
데이터 캐싱: 자주 변경되지 않는 비민감성 데이터(예: 애플리케이션 설정 정보, 사용자 이름 등)를 캐싱하여 API 호출 횟수를 줄입니다.

시스매