JavaScriptでのcookieの扱いについて
- 特定のキー名のcookie値が欲しい
- でも簡単に取得できる方法がない
キー名からcookie値を取得する方法…
それはJavaScriptでは1つではありません。
そこでいくつか方法を考えてみました。
このページの目次 [隠す]
JavaScriptはcookieの書き込みは簡単です。
▼ 例えばこのようなコード
cookie自体は キー名=値 のような形式です。
そのあとに有効期限(秒)、パスが続くという感じ
そして
document.cookie にそれを代入します。
上記の例だとhogeというキー名の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() を使ってるのは、正規表現リテラル( /.../ <== こういう感じのアレ)には変数を含められないからです。
それに注意する以外は他に言うことなし
方法3.楽にCookieを扱えるライブラリ導入
そもそも最初からライブラリを使うという解決策
特に使いやすそうなのは次2つです。
▼ js-cookieライブラリ
▼ jquery-cookieライブラリ
※ jquery-cookie ⇒ js-cookie に統一された模様
実質的にはjs-cookie一択かもしれません。
選択肢が少ないから迷わなくていいですね。
ということで簡単に箇条書き
▼ 好きな方法を使えばいいと思う
以上、JavaScriptでcookie値の取得でした。ではまた
個人的には3つ目の方法を選ぶことが多いです。