[JavaScript] 자바스크립트에서 쿠키 데이터 읽어오기

240_자바스크립트에서 쿠키 데이터 읽어오기

[적용]

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

---

[내용]

document.cookie 값을 불러와도 키와 값이 각각 문자열로 결합되어 있어 자바스크립트에서의 사용이 어렵다.

이럴 때는 문자열을 연과 배열로 분해하면 편리하게 사용할 수 있다.

document.cookie 문자열의 ;과 =을 분리하여 연관 배열의 객체로 변환하는 코드를 확인해보자.

쿠키의 값은 모두 문자열이므로 주의하자.

 

JavaScript (부분)                                                                                                                                               main.js

// 불러오기 버튼 클릭 시
btnRead.addEventListener('click', () => {
  // 쿠키 불러오기
  const obj = convertCookieToObject(document.cookie);
  console.log(obj);  // 콘솔 출력
  
  document.querySelector('#log').innerHTML =
    JSON.stringify(obj, null, ' ');
});

/**
* 쿠키를 객체로 변환
* @param cookies 쿠키 문자열
*/
function convertCookieToObject(cookies) {
  const cookieItems = cookies.split(';');
  
  const obj = {};
  cookieItems.forEach((item) => {
    // '='으로 분리
    const elem = item.split('=');
    // 키 가져오기
    const key = elem[0].trim();
    // 값 가져오기
    const val = decodeURIComponent(elem[1]);
    // 저장
    obj[key] = val;
  });
  return obj;
}

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김