JS memo

お洒落にJavaScript。

2019年3月21日18:10

cookieをjavascriptで設定、取得、削除する簡単な方法

メインビジュアル

cookieをjavascriptで設定、取得、削除する簡単な方法

cookieの概要とjavascriptでcookieを設定したり取得する方法をご紹介します。

目次

  1. cookieとは
  2. javascriptでcookieを設定、取得、削除
  3. jQueryでcookieを操作
  4. まとめ

cookieとは

例えば、Amazonで欲しい商品を見ていたとしましょう。その数日後にLINEやメールでAmazonからその見ていた商品がおすすめされたことはないでしょうか。また旅行をしたくてbookingで検索していたら、違うサイトにbookingの広告が現れたなんてことはないでしょうか。

自分がWebサイトに訪れた時に自分のパソコンやスマホに情報が保管されるような仕組みになっています。この仕組みはWebやサービスの利便性を上げるのが目的で、この保管される情報がcookieなのです。

cookieは文字列で、
名前(key)=値(value)
という形式で表されます。

またcookieは以下の属性がオプショナルで設定できます。

属性機能
pathcookieを使用できるpathを設定する。
domaincookieを使用できるドメインを設定する。
max-agecookieの寿命を設定する。
expirecookieの寿命を設定する。※max-ageが優先される。
securehttps接続のみcookieを有効にする。
httponlyjavascriptから参照できなよう設定する。
samesiteクロスオリジンへのリクエストの時にcookieを送信しないようにする。

Web上(Chrome)で設定されたcookieはディベロッパーツールのApplicationから見ることができます。

javascriptでcookieを設定、取得、削除する

今回、javascriptでcookieを操作するにあたり、node.jsでローカルサーバーを構築して検証しています。

javascriptでcookieを設定する

まずは必要最低限の設定です。

document.cookie = "key=value";

上記のコードのkeyにgreeting、valueにhelloを設定してローカルサーバーで見て見ましょう。

ちゃんと設定されていました。

各属性はセミコロンで分けて設定します。

document.cookie = "key=value; path=/; domain:127.0.0.1; max-age=3600; secure; samesite=lax;";

※secure属性を設定した場合、https接続でしかcookieが有効にならないので、ローカルサーバーでcookieを発行する場合は、https接続ができるよう設定する必要があります。
※httponly属性はjavascriptで設定ができません。

先ほど同様に上記のコードのkeyにgreeting、valueにgoodbyeを設定してローカルサーバーで見て見ましょう。

こちらも設定されていました!

javascriptでcookieを取得する

例えば、cookieがgreeting=goodmorning、greeting2=goodafternoon、greeting3=goodbyeの3つ設定されていたとします。

以下のコードでこのcookieたちがセミコロンで繋がった値が取得できます。

let cookies_get = document.cookie; // "greeting=goodmorning; greeting2=goodafternoon; greeting3=goodbye"

※cookieにhttponly属性が設定されていた場合はjavascriptから取得することができません。

以下のようにセミコロンで分割して、配列として取得することも可能です。

let cookies_get = document.cookie.split(";"); // [greeting=goodmorning, greeting2=goodafternoon, greeting3=goodbye]

javascriptでcookieを削除する

もしmax-ageやexpiresでcookieの有効期限を設定していて、その期限前にcookieを削除したい場合の方法です。

max-age=0を設定する

document.cookie = "key=; max-age=0"

expiresを過去の期間に設定する

document.cookie = "key=; expires=過去の日付"

jQueryでcookieを操作

これまでjavascriptでのcookie操作を説明してきましたが、jQueryでもcookieを操作することが可能です。ネイティブjavascriptだとエンコード・デコードの問題や、特定のcookieを取得したい場合など結構厄介です。jQueryではさらに簡単にcookieを操作できます。

簡単にjqueryのcookie操作を説明します。

jquery.cookie.jsを設置する

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

ダウンロードする場合はGitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookieからできます。

cookieの設定

設定したいkey、valueとオプションで属性を以下のように設定します。

$.cookie("key", "value", { expires: 日数, path: 'パス'、domain: 'ドメイン', secure: true|false });

cookieの取得

取得したいkeyを以下のように設定します。全てのcookieを取得する場合は()内を空白に設定すると連想配列で取得できます。

$.cookie("key");

cookieの削除

削除したいkeyを以下のように設定します。

$.removeCookie("key");

※属性を指定している場合は、その属性の記述も必要です。

まとめ

javascriptでのcookie操作でした。AppleのITPなどcookieの扱いに対しては規制が厳しくなり、ブラウザによっても扱われ方が違います。cookieの設定方法はjavascript以外にもあるので、またご紹介します。