JavaScript
cookie

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

More than 1 year has passed since last update.


概要

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

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


Cookieを全部吐かせる

let strFull = document.cookie;

strFullには「key=value」をスペースと;で繋いだ文字列が入ります。

:information_source: 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. 抽出できない場合空配列を返す

:information_source: RegExp - JavaScript | MDN

:information_source: JavaScript正規表現メモ。 - こせきの技術日記


valueをデコードする

let decodedStr = decodeURIComponent(str);

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

CookieのvalueはURIエンコードしてあるので、データによってはデコードする必要があります。

:information_source: decodeURIComponent() - JavaScript | MDN


valueをJSON形式にパースする

let jsonCookie = JSON.parse(decodedStr);

jsonCookieにはJSONオブジェクトが入ります。

:information_source: 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その他のオプションは今回は割愛。

:information_source: JavaScriptでcookie処理(読み・書き・削除) - Qiita