cookie, local storage, session stoarge 알아보기

Cookie

what is cookie?

서버에서 브라우저에게 통신 과정에서 줄 수 있는 데이터 조각이라고 합니다.
3가지 용도로 사용되고 있습니다.

• 세션 관리
  유저 로그인 정보 유지, 장바구니, 게임 기록 등
• 개인화
  테마, 다크 모드 유지 등
• 트래킹
  유저가 자주 보는 글, 찾아본 검색 기록 트래킹 등

예전에는 cookie를 이용하여 browser에 데이터를 저장하고 했습니다.
하지만, localStorage와 indexedDB가 생긴 이후 cookie에 데이터를 직접 넣는 것은 지양합니다.

how to set cookie?

Response header에 Set-Cookie 헤더 이용

Set-Cooke: cookieKey= cookieValue;와 같이 사용

• 예시
  Content-type: text/html
  Set-Cookie: yummy_cookie=choco
  Set-Cookie: tasty_cookie=strawberry

Set-Cookie에 life-cycle 부여하기

Set-Cookie: key=value; Expires=ExpiredTime;와 같이 사용

• 예시
  Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

Set-Cookie에 Domain과 Path 설정하기

Domain은 통신을 했을 때, 특정 도메인만 쿠키를 설정해 주고 싶을 때 설정합니다.
설정 해주게 되면, 서브도메인들도 모두 포함되게 됩니다.
설정을 하지 않으면 현재 주소의 호스트로 설정되게 됩니다.
Set-Cookie: key=value; Domain=Domain주소;
Path은 통신을 했을 때, 특정 path에만 쿠키를 보내기 위해 설정합니다.
서브 디렉토리들은 모두 포함됩니다. 설정하지 않으면 전역으로 설정됩니다.

Set-Cookie에 XSS 공격 방지를 위한 secure 설정하기

httpOnly를 붙여서 코드로 가져올 수 없는 cookie를 설정 할 수 있습니다.
secure를 붙임으로서 http 환경에서는 cookie가 가지 않게 할 수 있습니다.
Set-Cookie: key=value Secure; HttpOnly; Secure;

web storage api

session storage

sessionStorage는 페이지의 세션이 유지되는 동안 사용할 수 있습니다. 각 origin별로 별도의 스토리지를 관리합니다. 자바스크립트 코드로 작성 및 수정 그리고 삭제가 가능합니다.

local storage

localStorage는 session storage와 비슷하지만 만료되지 않습니다.
자바스크립트 코드로 작성 및 수정 그리고 삭제가 가능합니다.

set storage

localStorage.setItem('key', 'value'); sessionStorage.setItem('key','value');

delete storage

localStorage.deleteItem('key') sessionStorage.deleteItem('key');

get storage

localStorage.getItem('key'); sessionStorage.getItem('key');