[책] 자바스크립트 코드 레시피 278 - 218일차

쿠키 데이터 읽어 오기

• 쿠키 값을 참조하고 싶을 때

설명

document.cookie 값을 불러와도 키와 값이 각각 문자열로 결합되어 있어 자바스크립트에서의 사용이 어렵습니다. 이럴 때는 문자열을 연관 배열로 분해라면 편리하게 사용할 수 있습니다. document.cookie 문자열의 ;과 =을 분리하여 연관 배열의 객체로 변환하는 코드를 확인해 봅시다. 쿠키의 값은 모두 문자열이므로 주의합시다.

실습

index.html

<button class="btnRead">불러오기</button>

---

script.js

const btnRead = document.querySelector(".btnRead");
btnRead.addEventListener("click", () => {
  const obj = convertCookieToObject(document.cookie);
  console.log(obj);
});

/**
 * 쿠키를 객체를 변환
 * @param cookies 쿠키 문자열
 * @return 연관 배열
 */

function convertCookieToObject(cookie) {
  const cookieItems = cookie.split(";");
  const obj = {
    myName: "test",
  };
  cookieItems.forEach((item) => {
    const elem = item.split("=");
    const key = elem[0].trim();
    const val = decodeURIComponent(elem[1]);
    obj[key] = val;
  });
  return obj;
}