쿠키/스토리지

쿠키(Cookie)

특징

• 브라우저에 최대 4kb의 데이터를 저장할수있다
• 만료기간을 설정할수있으며, session이라고만 적혀있으면 브라우저를 닫을 때 삭제된다
• 모든 HTTP 요청마다 자동으로 서버에 전송된다
• 문자열만 저장 가능하다
• 보안 옵션(예: HttpOnly, Secure, SameSite 등)을 설정해 보안을 강화할 수 있다.
  - HttpOnly: 자바스크립트 접근 차단(XSS 방지)
  - Secure: HTTPS 연결에서만 전송
  - SameSite: 크로스사이트 요청 시 쿠키 전송 제한(CSRF 방지)

사용처

서버와 인증이 필요하거나, 서버와 정보가 항상 동기화되어야 할 때 사용

• 로그인 세션ID
• 인증 정보 저장
• 오늘 하루 보지 않기 팝업
• 방문 기록

보기

---

로컬 스토리지(Local Storage)

특징

• 브라우저에 영구저장한다(삭제전까지 남아있음)
• 저장 용량이 크다(5~10MB)
• 문자열만 저장 가능하다(객체는 JSON.stringify로 변환 필요)
• 같은 도메인 내 여러 모든 탭/창에서 공유 가능하다
• 서버로 자동 전송되지 않는다(서버에 보내려면 자바스크립트로 접근하여 직접보내야됨)

사용처

장기적으로 저장해야 하는 정보, 서버와 상관없는 데이터 저장할때 사용

• 사이트 환경설정(다크모드, 언어)
• 장바구니
• 최근 본 상품

보기

2. 세션 스토리지(Session Storage)

특징

• 저장 용량이 크다(5~10MB)
• 문자열만 저장 가능하다
• 브라우저 탭/창 단위로 데이터를 저장한다(같은 도메인이어도 다른 탭과 공유되지 않고 탭/창을 닫으면 삭제된다)
• 서버로 자동 전송되지 않는다(서버에 보내려면 자바스크립트로 접근하여 직접보내야됨)

사용처

임시로 저장해야 하는 정보 저장할때 사용

• 페이지 이동 간 일시적 데이터 저장 등