【JavaScript】ライブラリを使わずにCookieを読み書きする

概要

諸事情でCookieを読む処理を手書きしたいという場合に必要なあれやこれのメモ

ライブラリが使える場合はこれとか↓
js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

Cookieを全部吐かせる

let strFull = document.cookie;

strFullには「key=value」をスペースと;で繋いだ文字列が入ります。
document.cookie - Web API インターフェイス | MDN

特定のkeyのvalueを取得する

let str = cookieVal('hoge');

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

strには文字列かundefinedが入ります。

やり方はいくらでもありそうですが今回は正規表現を使いました。

1. 生のCookie文字列の末尾に;を追加する
2. 正規表現でvalueを抽出
3. 抽出できない場合空配列を返す

RegExp - JavaScript | MDN
JavaScript正規表現メモ。 - こせきの技術日記

valueをデコードする

let decodedStr = decodeURIComponent(str);

decodedStrにはURIデコード済みの文字列が入ります。

Cookieのvalueは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でcookie処理（読み・書き・削除） - Qiita