쿠키, 나는 당신을 거의 몰랐습니다.

25년 넘게 개발자로 일했지만 실제로 쿠키를 다룬 적은 없습니다. Perl 시절에는 숨겨진 필드를 사용하여 세션을 관리했습니다. 이제 express-session 을 사용하고 있으므로 쿠키에 더 익숙해지는 것이 좋을 것이라고 생각했습니다. 그것은 내가 생각했던 것보다 더 힘든 것으로 판명되었습니다.

일반적으로 쿠키는 서버에서 생성되며 서버에서 HttpOnly 플래그를 활성화하면 브라우저의 JS 코드에서 쿠키를 볼 수 없습니다. 그러나 저는 귀하의 브라우저에서 작동하는 데모를 만드는 것을 좋아합니다.

쿠키는 JS에서 document.cookie 개체로 표시됩니다. console.log(typeof document.cookie)를 실행하면 string가 반환되지만 문자열이 아닙니다. getters 및 setters 을 가진 객체입니다.

브라우저에 쿠키를 추가하는 것은 매우 쉽습니다document.cookie = 'cookie1=New Cookie!'. 그리고 그것을 바꾸는 것은 매우 쉽습니다-document.cookie = 'cookie1=New value.' . 그것을 삭제하는 것은 다른 문제입니다.

실제로 쿠키를 삭제하는 것이 아니라 만료시킵니다. 내가 찾은 대부분의 예는

let date = new Date(0);
document.cookie = 'cookie1=; expires='+date.toUTCString();

하지만 설정max-age이 더 쉽다는 것을 알았습니다.

document.cookie = 'cookie1=; max-age=0';

내가 배운 재미있는 사실은 같은 이름과 다른 값을 가진 여러 개의 쿠키를 가질 수 있다는 것입니다.

document.cookie = 'cookie1=root; path=/';
document.cookie = 'cookie1=parent; path=/Parent';
document.cookie = 'cookie1=cwd;';
console.log(document.cookie);

경로 이름이 /Parent 인 브라우저에 이전 코드를 제공하는 경우 출력은 cookie1=cwd; cookie1=parent; cookie1=root 여야 합니다.

여기에 몇 가지 까다로운 점이 있습니다. 첫째, path 에 임의의 값을 사용할 수 없습니다. document.location.pathname 의 실제 경로여야 합니다. 둘째, document.cookie는 모든 쿠키를 반환하지만 어떤 쿠키가 어떤 경로와 연결되어 있는지 알려주지 않습니다. 쿠키는 가장 긴 경로에서 가장 짧은 경로로 오름차순입니다. let cookies = document.cookie.split('; ')와 같이 하면 배열이 오름차순이 됩니다(Chrome, Firefox 및 Safari에서 테스트됨).

특정 쿠키를 변경하거나 삭제하려면 해당 경로를 지정해야 합니다.

document.cookie = `cookie1=NewValue; path=/;`;
document.cookie = `cookie1=; path=/; max-age=0;`;

쿠키의 경로는 변경할 수 없습니다.

달리기document.cookie = 'cookie1=New Cookie!'는 나쁜 형태라는 점을 지적해야 합니다. so- document.cookie = 'goodCookie=' +encodeURIComponent('data to encode') 와 같이 데이터를 인코딩해야 합니다. 이렇게 하면 데이터에 세미콜론을 사용할 수 있습니다.

시작하기에 충분합니다. https://sean.brunnock.com/Javascript/Cookies/에 더 많은 작업 예제가 있습니다. 도움이 되셨기를 바랍니다.