Post

쿠키(Cookie)와 저장소(Storage)

  • Cookie와 Storage 모두 개발자 도구의 Application 탭에서 확인할 수 있다.
  • Cookie는 EditThisCookie 크롬 확장프로그램을 사용하는 것이 편하다.

서버에서 클라이언트가 쿠키를 설정하도록 지정할 수도 있고, 클라이언트에서 자체적으로 설정할 수도 있다. HTTP는 stateless protocol이므로 상태를 저장하기 위해 쿠키를 이용한다.

쿠키는 기본적으로 Name=Value 형태로 지정한다. 다음 속성들도 가질 수 있다.

  • Expires / Max-Age : 파기 날짜를 지정하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.
  • Path : 입력하지 않으면 현재 도메인의 경로로 자동 입력된다. 지정한 경로의 하위에서만 해당 쿠키에 접근할 수 있다.
  • Domain : 입력하지 않으면 현재 도메인의 경로로 자동 입력된다. 현재 도메인과 Domain 값이 일지하지 않으면 쿠키 접근을 막기 때문에 거의 건드리지 않는다.
  • Secure : 이 속성을 지정하면 해당 쿠키는 SSL로만 요청할 수 있다. 위 네 가지 속성은 쿠키를 생성할 때 지정할 수 있다. 지정할 수 없는 속성으로는 Size, HTTP, SameSite가 있다.

쿠키 생성

  • Client-Side에서 JS로
  • = 연산자 이지만 cookie가 전부 대체되는 것이 아니라 += 처럼 추가된다.
1
2
document.cookie = 'Name=Value;Expires=2017;Domain=dom;Path=path;Secure;'

  • Server-Side에서 Set-Cookie를 보내서
1
2
3
Set-Cookie: promo\_shown=1; Max-Age=2600000; Secure

쿠키 제거

  • 쿠키를 제거하려면Expires 속성을 이전 날짜로 설정 해서 자동으로 삭제되도록 한다.
  • 쿠키는 브라우저를 끄거나 다른 사이트로 이동한다고 자동으로 삭제되지 않는다.

쿠키 생성 / 삭제 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<script src="localpath/js.cookie.js"></script>
<script>
$(document).ready(function(){
Cookies.set('cname', 'hi', {expires: 7, path: ''});
alert(Cookies.get('cname'));
Cookies.remove('cname', {path: ''})
alert(Cookies.get('cname'));


})
</script>

  • path를 지정해 준 경우 remove할 때 path를 지정해야 쿠키가 삭제된다.
  • path를 지정하지 않은 경우는 그냥 name만 주어도 삭제된다.

Storage

https://www.w3schools.com/html/html5_webstorage.asp

HTML5 부터는 저장소(storage) 기능을 제공한다. 저장소는 로컬 저장소와 세션 저장소로 나뉜다. 두 저장소 모두window 객체 안에 들어 있다.

  • localStorage : 웹 브라우저를 삭제하지 않는 이상 데이터를 영구적으로 저장한다.
  • sessionStorage : 웹 브라우저가 종료될 때까지 데이터를 저장한다.

SameSite cookies explained

SameSite Cookie

This post is licensed under CC BY 4.0 by the author.