LoginSignup
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-16

概要

諸事情で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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11