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

• 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 속성을 이전 날짜로 설정해서 자동으로 삭제되도록 한다.
• 쿠키는 브라우저를 끄거나 다른 사이트로 이동한다고 자동으로 삭제되지 않는다.

쿠키 생성 / 삭제 함수

• 쿠키 생성 / 삭제 과정이 번거롭기 때문에 보통 함수로 만들어 사용한다.
• https://www.w3schools.com/js/js_cookies.asp
• jQuery Cookie Plug-in
• jQuery를 사용하면 함수를 만들지 않아도 간단히 사용할 수 있다.
• https://github.com/js-cookie/js-cookie
• $.cookie를 사용하는 방식은 구식 라이브러리로, 위 라이브러리로 대체(supersede)됐다.

```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