쿠키(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가 전부 대체되는 것이 아니라 += 처럼 추가된다.

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