개요

여러 가지 상황에서 쿠키를 읽는 과정을 필기하고 싶다면 필요한 사항과 이것의 메모

도서관을 사용할 수 있다면 ↓ js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

쿠키를 모두 토해

let strFull = document.cookie;

strFull 에는 「key=value」를 스페이스와 ; 로 연결한 캐릭터 라인이 들어갑니다.
document.cookie - 웹 API 인터페이스 | MDN

특정 키의 값을 가져옵니다.

let str = cookieVal('hoge');

function cookieVal(key){
  return ((document.cookie + ';').match(key + '=([^¥S;]*)')||[])[1];
}

str 에는 문자열 또는 undefined 가 들어갑니다.

하는 방법은 얼마든지 있을 것 같습니다만 이번은 정규 표현을 사용했습니다.
1. 원시 쿠키 문자열의 끝에 ; 추가
2. 정규 표현식으로 value 추출
3. 추출할 수 없는 경우 빈 배열을 반환합니다.

RegExp - JavaScript | MDN
자바스크립트 정규식 메모. - 코세키의 기술 일기

value 디코딩

let decodedStr = decodeURIComponent(str);

decodedStr 는 URI 디코딩된 문자열을 포함합니다.

쿠키의 값은 URI로 인코딩되므로 데이터에 따라 디코딩해야 합니다.

decodeURIComponent() - JavaScript | MDN

value를 JSON 형식으로 구문 분석

let jsonCookie = JSON.parse(decodedStr);

jsonCookie 에는 JSON 객체가 들어 있습니다.

JSON.parse() - JavaScript | MDN

모두 정리해

let key = 'hoge';
let jsonVal = JSON.parse(
  decodeURIComponent(
    (
      (document.cookie + ';').match(key + '=([^¥S;]*)')||[]
    )[1]
  )
);

쓸 때

쓰는 경우는 읽는 경우와 반대 순서로 처리합니다.

let key = 'hoge';
let jsonVal = {"fuga": "piyo"};
document.cookie = key + '=' + encodeURIComponent(JSON.stringify(jsonVal));
// hoge={%22fuga%22:%22piyo%22}

위의 코드라면 key가 hoge 의 부분만 갱신됩니다.
expire 라든지 path 그 외의 옵션은 이번은 할애.

JavaScript로 쿠키 처리 (읽기, 쓰기, 삭제) - Qiita