쿠키 (Cookie)

쿠키는 Request의 Header에 포함되는 문자열 형태의 데이터로, 이름과 값 쌍으로 저장되며 ; 을 이용하여 데이터가 구분된다. (쿠키 이름=값; 속성 이름1=값; 속성 이름2=값; ... 식으로) 쿠키는 ,으로 구분된다.
주로 server 측에서 만들고 관리한다. 서버는 Response에서 set-cookie header로 쿠키를 설정하고, 클라이언트는 Request에서 자체적으로 cookie header로 리퀘스트를 보낼 때 쿠키를 같이 보낸다.

• 수명을 지정할 수 있다.

js에서 cookie

js에서는 Document 객체의 cookie 속성(property)를 통해 생성/수정/참조할 수 있다. 다만 일반적으로 클라이언트에서 cookie를 생성/수정하는 것은 권장되지는 않는다.

document.cookie

옵션

쿠키 옵션의 일부만 적었다.

• Domain : cookie를 보낼 도메인.
• Expires : 만료 기한
• HttpOnly : javascript에서 cookie를 조작 가능하게 할지의 여부.
• SameSite : 다른 사이트 사이 request/response에 cookie 전송 가능 여부.
• Secure : HTTPS request에 대해서만 cookie를 보내는 설정.SameSite=None 을 설정하면 필수로 설정해야 한다.
• Path : cookie를 보낼 경로.

웹 스토리지 (Web Storage)

쿠키보다 용량이 훨씬 크고, 주로 client 측에서 관리하고 사용할 수 있는 데이터 저장소.

• 수명(만료 기간)이 존재하지 않는다.
• 클라이언트 측에서 만들고 관리한다.

세션 스토리지 (Session Storage)

현재 탭에서만 유효한 저장소

• 문자열 데이터를 저장한다.
• 탭을 닫으면 데이터가 사라진다.
• 새로고침/페이지 복구 시에는 계속 유지된다.
• 다른 탭과 데이터가 공유되지 않는다.

js에서 sessionStorage

js에서 Window 객체의 속성 sessionStorage를 사용하여 관리할 수 있다.

• Window.sessionStorage : 세션 스토리지를 의미하는 Storage 객체. Storage 객체의 속성/메소드를 사용할 수 있다. 일반적인 Window 객체의 속성처럼 Window를 생략하고 sessionStorage로만 쓸 수 있다.

로컬 스토리지 (Local Storage)

어떤 사이트에서 유효한 저장소

• 문자열 데이터를 저장한다.
• 탭을 닫거나 브라우저(창)를 닫아도 데이터가 유지된다.
• 사이트가 같은 다른 탭 사이에서도 데이터가 공유된다.

js에서 localStorage

js에서 Window 객체의 속성 localStorage를 사용하여 관리할 수 있다.

• Window.localStorage : 로컬 스토리지를 의미하는 Storage 객체. Storage 객체의 속성/메소드를 사용할 수 있다. 일반적인 Window 객체의 속성처럼 Window를 생략하고 localStorage로만 쓸 수 있다.