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

JavaScriptでのcookieの扱いについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▼ 上記コードのcookie出力例

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

こっちの方が分かりやすい気がする

上記コードでわざわざ RegExp()  を使ってるのは、正規表現リテラル( /.../  <== こういう感じのアレ)には変数を含められないからです。

それに注意する以外は他に言うことなし

そもそも最初からライブラリを使うという解決策

特に使いやすそうなのは次2つです。

▼ js-cookieライブラリ

▼ jquery-cookieライブラリ

※ jquery-cookie ⇒ js-cookie に統一された模様

実質的にはjs-cookie一択かもしれません。

選択肢が少ないから迷わなくていいですね。

cookieをキー名から取得のまとめ

ということで簡単に箇条書き

▼ 好きな方法を使えばいいと思う

以上、JavaScriptでcookie値の取得でした。ではまた

個人的には3つ目の方法を選ぶことが多いです。

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください