JavaScriptからcookie値をキー名で取得する３つの方法／コード例

JavaScriptでのcookieの扱いについて

特定のキー名のcookie値が欲しい
でも簡単に取得できる方法がない

キー名からcookie値を取得する方法…
それはJavaScriptでは１つではありません。

そこでいくつか方法を考えてみました。

このページの目次

cookieの書き込みはとても簡単なのに…
cookieをキー名で読み込むメソッドはない…
方法１．愚直にキー名からcookie値を取得
方法２．正規表現でキー名からcookie値を抽出
方法３．楽にCookieを扱えるライブラリ導入
cookieをキー名から取得のまとめ

cookieの書き込みはとても簡単なのに…

JavaScriptはcookieの書き込みは簡単です。

▼ 例えばこのようなコード

/// cookieを書き込む
document.cookie = 'hoge=1234;max-age=86400;path=/';

1 2	/// cookieを書き込む document.cookie = 'hoge=1234;max-age=86400;path=/';

cookie自体はキー名=値のような形式です。

そのあとに有効期限（秒）、パスが続くという感じ

そして document.cookie にそれを代入します。
上記の例だとhogeというキー名のcookieですね。

書き込み自体はとても簡単です。

cookieをキー名で読み込むメソッドはない…

そしてJavaScriptのcookieの読み込みについて

なぜかキー名で読み込めるメソッドはないです。

▼ 代わりに次のように全取得なら可能

/// 全てのcookie（文字列）を表示
console.log(document.cookie);

1 2	/// 全てのcookie（文字列）を表示 console.log(document.cookie);

▼ 上記コードのcookie出力例

'_ga=GA1.2.123456789.1234567890; _gid=GA1.2.1234567890.1234567890; preferredlocale=ja; _gat=1;  hoge=1234; fuga=1234; piyo=1234'

1	'_ga=GA1.2.123456789.1234567890; _gid=GA1.2.1234567890.1234567890; preferredlocale=ja; _gat=1; hoge=1234; fuga=1234; piyo=1234'

このように１つのcookieはキー名=値で表現され、それがセミコロン（;）で区切られている仕様です。（実際はセミコロン後のスペースも区切り文字の一部）

キー名でcookie取得できるメソッドはありません。

だから工夫が必要という訳です。

次からは便利な方法をいくつか紹介します。

１つめは愚直な取得方法になります。

参考にしたのはMDNに載ってた次のコード

▼ こういうコード例が載っていたが…

JavaScript

document.cookie = "test1=Hello"; document.cookie = "test2=World"; const cookieValue = document.cookie .split('; ') .find(row => row.startsWith('test2')) .split('=')[1];

1
2
3
4
5
6
7

document.cookie = "test1=Hello";
document.cookie = "test2=World";

const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('test2'))
  .split('=')[1];

引用元　：　https://developer.mozilla.org/ja/docs/Web/API/Document/cookie

これも悪くないけど１つ欠点があります。

仮に test2-xxx みたいなcookie名があった場合、 row.startsWith('test2') としてるから意図しない取得が起こるリスクがあります。

だから次のように改良してみました。

▼ このようなコードに改良

/// 取得対象のcookieキー名
const key = 'hoge';

/// そのcookie値を取得
const value = document.cookie
  .split(/;\s*/)
  .find(row => {
    [key,value] = row.split('=')
    return key === 'test'
  }).split('=')[1];
  
console.log(value)
  /// => '1234'

/// 取得対象のcookieキー名

const key = 'hoge';

/// そのcookie値を取得

const value = document.cookie

.split(/;\s*/)

.find(row => {

[key,value] = row.split('=')

return key === 'test'

}).split('=')[1];

console.log(value)

/// => '1234'

見て分かるように少し遠回りしてます。

初めに各cookieをsplitメソッドで配列分割し、findメソッドで探したいキー名のcookieを見つけます。最後にもう一度splitメソッドして値を取り出すだけ

愚直だけど確実な方法だと思います。

次の方法を正規表現を使ったやり方

例えば hoge というcookieがあるとしましょう。

それに合致する正規表現は以下になります。

/hoge\=([^\;]*)\;*/

1	/hoge\=([^\;])\;/

クッキー形式であるキー名=値; に当てはまる正規表現です。ただし最後のcookieにはセミコロンが付かないため、その点を考慮した表現にもなってます。

ということで早速コードを書いてみました。

▼ 任意のキー名のcookie値を取得するコード例

/// ここは任意のキー名
const key = 'hoge';

/// 正規表現でcookie値を取得
const value = document.cookie.match(
  new RegExp(key+'\=([^\;]*)\;*')
)[1];

/// cookie値を表示
console.log(value);
  /// => '1234'