Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

wifeofvillon
孫請けSIer→フリーランスコーダー→QAバイト
drivemode
No-look freedom for driving.
http://drivemode.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away