(2) Web data storage - 쿠키 (Cookie) 추가/수정/삭제

자바스크립트로 쿠키 추가하기

쿠키를 추가하는 방법은 매우 간단하다

다음과 같이 document.cookie에 새로 추가하고 싶은 쿠키의 값을 넣어주면 된다.

document.cookie = 'language=korean';

 

여기서 봐야할 것은 document.cookie 자체를 덮어 쓰는 것이 아니라

새로운 쿠키를 추가만 한다는 점이다.

보기엔 document.cookie 라는 변수에 새로운 값을 할당하는 것처럼 보이지만

사실 내부적으로는 조금 다르게 동작한다.

---

자바스크립트로 쿠키 수정하기

만약 현재 있는 쿠키의 값을 변경하고 싶으면

변경하고 싶은 쿠키의 이름에 새로운 값을 넣은 문자열을

document.cookie에 넣어 주면 된다.

 

방금 language라는 쿠키의 값을 korean으로 넣었는데 english로 바꾸고 싶다면

다음과 같이 콘솔창에 작성한다.

document.cookie = 'language=english';

---

쿠키에 띄어쓰기나 특수 문자 넣기

쿠키의 이름과 값에 띄어쓰기나 특수 문자를 넣고 싶을경우

쿠키의 형식을 일관성 있게 유지하고

혹시 모를 에러 방지를 위한 내장 함수인 encodeURIComponent() 로

이름과 값을 인코딩 해야한다.

인코딩을 하면 이러한 띄어쓰기, 특수 문자들을

안전하게 표현할 수 있는 문자로 바꿀 수 있다.

 

인코딩을 하지 않은 경우, 아래와 같이 쿠키 값에 세미콜론이 들어갔다면

세미콜론에서 쿠키의 값이 짤리는 현상이 발생한다.

 

다음과 같이 인코딩을 하면

제대로 들어가는 것을 확인할 수 있다.

document.cookie = 'language=' + encodeURIComponent('korean;english');

 

 

인코딩했던 문자열을 다시 원래의 문자열로 돌리는 과정을 디코딩 이라고 하며

디코딩을 하는 방법은 decodeURIComponent() 함수를 사용한다.

---

쿠키 삭제하기

추가 했던 쿠키를 삭제하기위해 Expires와 Max-Age 옵션을 이용한다.

삭제하고 싶은 쿠키에 이미 지난 날짜로 Expires 옵션을 추가하면 된다.

document.cookie = 'language=; Expires=' + new Date(2025, 01, 01).toUTCString();

 

 

다른 방법으로는 삭제하고 싶은 쿠키의 Max-Age 옵션의 값을

0이나 음수로 설정해도 삭제할 수 있다.

document.cookie = 'language=; Max-Age=-1';