하루 동안 이 창을 보지 않기등의 정보, 자동 로그인 같은 것을 저장
🍪쿠키
- HTTP 쿠키(HTTP cookie)
- 웹 서버에 의해 사용자의 컴퓨터에 저장되는,
이름을 가진 작은 크기의 데이터 - key : value 형태
브라우저에서 쿠키 확인
개발자도구(F12) > Application > Cookies
쿠키 다루기
1. 쿠키 읽기(Read)
- name = value 형태
;로 구분 => 원하는 쿠키 찾기 가능
사용 예시
// 기본 읽어오기
const cookies = document.cookie; // cookie1=value1; cookie2=value2;...// 배열 형태로 가져오기
const cookies = document.cookie.split("; ");
// 원하는 쿠키를 원하는 변수명으로 저장
// cookies에서 auth-token이라고 시작하는 단어를 찾아 authToken이라고 저장
const authToken = cookies.find((cookie) => cookie.startsWith("auth-token"));2. 기타 사용법(추후 정리)
🔍쿠키, 세션, 스토리지
| 구분 | 쿠키 (Cookie) | 세션 (Session) | 스토리지 (Storage) |
|---|---|---|---|
| 저장 위치 | 클라이언트(브라우저) | 서버 | 클라이언트(브라우저) |
| 유지 시간 | 만료 기간 설정 가능 만료 기간 없으면 브라우저 종료 시 삭제 | 브라우저 종료 시 기본적으로 삭제 서버에서 시간 초과 설정 가능 | 로컬 스토리지: 브라우저 종료 후에도 유지 세션 스토리지: 브라우저 종료 시 삭제 |
| 보안 | 클라이언트 측에 저장 보안에 취약할 수 있음 | 서버 측에 저장 상대적으로 보안이 높음 | 클라이언트 측에 저장 보안에 취약할 수 있음 |
| 용량 제한 | 도메인당 4KB | 서버 메모리 용량에 따라 다름 | 로컬 스토리지: 5~10MB 세션 스토리지: 5~10MB |
| 데이터 접근 | 모든 서버에서 접근 가능 | 특정 서버에서만 접근 가능 | 같은 도메인 내 모든 페이지에서 접근 가능 |
| 사용 사례 | 로그인 상태 유지 사용자 선호 설정 저장 | 사용자 인증 일시적 데이터 저장 | 사용자 설정 저장 애플리케이션 상태 저장 |
| 데이터 전송 | 모든 요청에 자동으로 포함 | 요청 시 서버에만 포함 | 클라이언트 측에서 직접 접근 |
🔗스토리지
참고
커피는 콜드브루