엄범


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


Cookie

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


쿠키는 기본적으로 `` Name=Value`` 형태로 지정한다.

다음 속성들도 가질 수 있다.

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

위 네 가지 속성은 쿠키를 생성할 때 지정할 수 있다.

지정할 수 없는 속성으로는 Size, HTTP, SameSite가 있다.


쿠키 생성

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

```

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure

```


쿠키 제거

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

쿠키 생성 / 삭제 함수


```js

<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



'Languages & Frameworks > Front-end' 카테고리의 다른 글

[HTML, JS] refresh / redirect  (0) 2017.04.29
[jQuery] CDN, Usage  (0) 2017.04.13
쿠키(Cookie)와 저장소(Storage)  (0) 2017.04.12
[Front-end] DOM 이벤트 모델  (0) 2017.03.15
[JS] 팁, 문서 객체 모델(DOM)  (0) 2017.03.15
HTML (HTML5)  (0) 2017.03.01