쿠키
- 쿠키는 브라우저에 저장되는 작은 크기의 문자열로 RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부
- 주로 웹서버에 의해 만들어짐
- 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장
- 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달
- document.cookie 프로퍼티를 이용하면 브라우저에서도 쿠키에 접근할 수 있음
- document.cookie는 name=value 쌍으로 구성되어있고, 각 쌍은 ;로 구분함. 이때, 쌍 하나는 하나의 독립된 쿠키를 나타냄
- document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신함. 이때, 다른 쿠키의 값은 변경되지 않음
document.cookie = "user=John"; // 이름이 'user'인 쿠키의 값만 갱신함
alert(document.cookie); // 모든 쿠키 보여주기코드를 실행하면 여러개의 쿠키가 출력되는데, 모든 쿠키를 덮어 씌우지 않고 명시된 쿠키인 user만 갱신된것을 알수 있음
단점
- encodeURIComponent로 인코딩한 이후의 name=value 쌍은 4KB를 넘을 수 없음
- 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있습니다. 개수는 브라우저에 따라 조금씩 다름
path
path=/mypath- URL path(경로)의 접두사로, 이 경로나 이 경로의 하위 경로에 있는 페이지만 쿠키에 접근할 수
있음 - 절대 경로이어야 하고, 미 지정시 기본값은 현재 경로
- path=/admin 옵션을 사용하여 설정한 쿠키는 /admin과 /admin/something에선 볼 수 있지만, /home 이나 /adminpage에선 볼 수 없음
- 특별한 경우가 아니라면, path 옵션을 path=/같이 루트로 설정해 웹사이트의 모든 페이지에서 쿠키에 접근할 수 있도록 하는것이 좋음
domain
domain=site.com- 쿠키에 접근 가능한 domain(도메인)을 지정합니다. 다만, 몇 가지 제약이 있어서 아무 도메인이나 지정할 수 없음
- domain 옵션에 아무 값도 넣지 않았다면, 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있음.
- site.com에서 설정한 쿠키는 other.com에서 얻을수 없음
- 서브 도메인(subdomain)인 forum.site.com에서도 쿠키 정보를 얻을 수 없음
expires와 max-age
- expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제됨. 이를 세션 쿠키라함
- expires 나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않음 => jwt의 access토큰과 refresh토큰을 이점을 이용해서 구현하는것 같음
- expires 옵션값을 과거로 지정하면 쿠키는 삭제됨
setCookie(name, value, options)
- 현재 경로(path=/)를 기본으로, 주어진 name과 value를 가진 쿠키를 설정
function setCookie(name, value, options = {}) {
options = {
path: '/',
// 필요한 경우, 옵션 기본값을 설정할 수도 있습니다.
...options
};
if (options.expires instanceof Date) {
options.expires = options.expires.toUTCString();
}
let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (let optionKey in options) {
updatedCookie += "; " + optionKey;
let optionValue = options[optionKey];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;
}
// Example of use:
setCookie('user', 'John', {secure: true, 'max-age': 3600});deleteCookie(name)
- 만료 기간을 음수로 설정하면 쿠키를 삭제할 수 있음
function deleteCookie(name) {
setCookie(name, "", {
'max-age': -1
})
}