[Javascript] Playing with cookies

For

• 프로젝트를 시작한 초기 단계에 사용자가 사이트에 들어오면 발행하는 identity key 나 로그인시 발행하는 token 을 localStorage 에 저장하고 써왔으나, localStorage 에 이러한 user tracking/identification 정보들을 저장하고 쓰는것은 별로 좋지 않고, 이러한 값들을 SSR 시 api 통신을 할때 가져와야 하는데 localStorage의 값은 서버 쪽에서 알수가 없었으므로 이러한 값들을 쿠키로 저장하게 됐다.

How

save cookie

• 쿠키를 클라이언트 단에서 설정 하는 방법은 document.cookie 를 사용 해 저장할 수 있다.

document.cookie = "identity-key = identityKeyValue;" 

• 가장 기본적인 형태의 쿠키 저장인데, 이렇게 저장을 하면 session cookie 가 되어 세션이 종료 될 시, 쿠키가 삭제 된다.

• 토큰과 같이 유효시간을 설정해 주어야 하는 쿠키는 뒤에 expire 혹은 max-age 를 추가해서 언제 쿠키가 만료되어 삭제될지 정해 줄 수 있다. 주의할 점은, javascript의 now = new Date() 와 같이 시간을 설정했다면 쿠키에 저장할때는 now.toUTCString() 이나 now.toGMTString() 을 해주어야 알맞은 format 으로 expire 시간이 들어간다.

document.cookie = `token = tokenValue; expires = ${now.toUTCString()};`

*** expires 의 경우, safari 브라우저에서는 최대 7일의 유효기간을 가진 쿠키를 설정 할 수 있다. Chrome 은 쿠키 만료 시간에 제한이 없는거 같지만(한달의 유효기간 까지도 설정이 잘 됐다) safari 의 경우에는 사용자 정보 보호등의 이유로 최대 기한이 7일로 변경됐다고 한다. 7일을 초과하는 유효기간을 설정해도 7일 뒤 만료되는 쿠키로 저장이 된다. 그 미만의 유효기간은 잘 적용이 되는것을 확인했다. ***

• 상단의 쿠키 저장에서 중요한 부분이 하나 더 있는데, 그것은 쿠키를 저장할 때 path 를 같이 저장하는 것 이다. 하나의 페이지에서 저장한 쿠키값을 다른 페이지를 로드 하면 사라지는 부분에 대해서 의아 했었는데, path 값을 따로 지정해 주지않으면 현재 경로를 path 로 지정하고, 해당 path 의 하위 경로에서만 해당 쿠키값을 access 할 수 있기 때문이었다.

document.cookie = `token = tokenValue; expires = ${now.toUTCString()}; path=/;`

• 위와 같이 path=/ 를 설정하고 나서야 사이트 내 모든 페이지에서 해당 쿠키를 access 할 수 있었다.

retrieve cookie

• 이렇게 저장한 쿠키들을 document.cookie 를 통해 가져올 수 있는데, devTools 에 name value pair 가 이쁘게 찍히는 것을 보고 가져오는것도 나눠서 가져올 수 있을거라 예상했지만 document.cookie 를 console.log(document.cookie)를 통해 찍어보면 저장한 쿠키들이 하나의 string 덩어리로 모두 찍히게 된다. 이를 각각의 쿠키로 나누기 위해선 string 을 manipulate 하는 method 들을 사용 하면 된다.

• 각 쿠키의 name value pair 가 ; 를 통해 나눠져 있으므로 ; 를 기준으로 나누면 "token=tokenValue"와 같은 형태로 가져 올 수 있지만, 우리는 name=value 가 필요한 것이 아닌 해당 value만 필요하므로 다음과 같이 필요로 하는 cookie 의 value를 가져와 사용했다.

document.cookie.split("token=")[1].split(" ")[0].replace(";", "")

delete cookie

• 쿠키를 지우는 방법은 다음과 같이 expires 에 지난 날짜를 지정해 주거나, max-age 에 0이나 음수값을 주면 된다. 만료된 쿠키는 자동으로 삭제가 이루어진다.

document.cookie = "token = ; expires=Thu, 01 Jan 1990 00:00:00 UTC;"
document.cookie = "token = ; max-age = 0;"