JavaScriptを使ってCookieで遊ぶ

ここではJavaScriptを使ってCookieを作成,取得,削除する方法などをご紹介します. 生まれてこの方,Cookieの恩恵を受けてはいたものの,JavaScriptを使って直接Cookieをいじる機会に恵まれぬまま生きてきたので,今日ここに調べたことをまとめます. 最後にはJavaScriptで簡単にCookieを操作できるAPIのご紹介も載せました！

Cookieとは

ここで言うCookie(クッキー)とはティータイムにいただくおやつのことではありません. Webサイトを表示した時,ブラウザに保存されるデータファイルのことです. 実態はNAME=VALUE形式のテキストが書かれたファイルです. セミコロン;によってこのNAME=VALUEの対を数珠つなぎにすることも出来ます. こんなふうに...


name1=value1; name2=value2; name3=value3 …

このように数珠つなぎにすることで複数のデータ(NAMEとVALUEの対)をブラウザに保存することが出来ます.

Cookieはブラウザが自動的に整理整頓してくれるのでユーザーはもちろん,JavaScriptでCookieをつくる際にドメイン云々を気にする必要はまったくありません. これはCookieがドメインごとに分けて保存されるということです. ドメインをまたいでCookieを共有したい場合はそのように設定をする必要があります. ここではそのようなドメインをまたいだCookieの作成方法には触れません. 悪しからず.

Cookieを作成する

document.cookieに文字列(NAME=VALUEの対)をセットすることでCookieが作成されます. 次のように...


document.cookie = "user=seeker5084";

これでuser=seeker5084というデータ(Cookie)をブラウザに保存することが出来ました！さて,Cookieにはオプションを指定することが出来ます. これらは一般に属性と呼ばれます. オプションでも属性でも,馴染みやすい方で呼んで良いと思います. 私はオプションと呼ぶ方が好きなので,以後オプションと呼ばせてもらいます.

Cookieに設定できるオプション

max-ageとexpire

Cookieの有効期限を設定するためのオプションです. 設定方法はCookieにそのまま書き込むだけです.


document.cookie = "max-age=86400";

以下,max-ageとexpireの違いです.

max-age: 有効期限を秒数で指定する
expire: 有効期限を日時で指定する

expireの使い方は次のような形です.


document.cookie = "expire=Sun, 16 Sep 2018 09:45:30 GMT";

ちなみに,両方指定するとmax-ageの方が優先されます. また,どちらも指定せずにCookieを作成するとブラウザを閉じた時にクッキーはその寿命を迎えます💀

secure

このオプションを指定すると,通信がHTTPSの時のみCookieが作成されるようになります. 必ずこのオプションをつけるようにしましょう. このように...


document.cookie = "secure";

これで暗号化された通信が確立されている時にのみCookieのやりとりが行われるようになります. Cookieは悪用すれば,もしくは悪用されれば個人を特定出来るようなデータを持ち得る可能性が十二分にあります. セキュリティ対策として忘れずに指定しましょう⚠️

その他のオプションについては下記のWebサイトがとても分かりやすくまとまっているので是非とも参考にしてみてください. Cookie の仕様とセキュリティ | http://www.yunabe.jp/docs/

Cookieを読み取る

例えば次のようなCookieが保存されているとします.


"username=seeker5084; id=1234; max-age=86400; secure"

document.cookieを呼び出すだけで,ブラウザに保存されたデータ,すなわちCookieの内容を参照することが出来ます. 次のように...


document.cookie; // "username=seeker5084; id=1234"

ここで,オプション(属性値)が表示されない点に注目です. オプション以外のデータだけ表示されるので使う側は非常に使いやすいわけです. さて,もしも複数のデータを含むCookieから特定のデータのみを抽出したい場合,次のスクリプトを使うと良いでしょう.


function getCookieValue(a) {
  var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
  return b ? b.pop() : '';
}

Stack Overflowに投稿されていた素晴らしいコードです(Macさんありがとう！). What is the shortest function for reading a cookie by name in JavaScript? | Stack Overflow さて,このスクリプトを使えば,次のように特定のデータのみを抽出することが出来るようになります.


getCookieValue('username'); // "seeker5084"
getCookieValue('id'); // "1234"

Cookieを削除する

特定のデータを持つCookieを削除したい場合はそのmax-ageを0に設定すればすぐに削除されます.


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

すべてのCookieを削除するには次のスクリプトを実行すると上手く行きます.


function deleteAllCookies() {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    document.cookie = cookies[i].split('=')[0] + '=; max-age=0';
  }
}

やっていることは同じで,すべてのCookieデータをforループで抽出して,それぞれの寿命をゼロにしているだけです. ただし,この方法で削除出来るCookieはJavaScriptによって作成されたもののみです. サーバーが作成したCookieに対してはまったく意味が無いのでその点注意しましょう！

JavaScript API

さて,最後まで読んでくれたあなたへ,JavaScriptでCookieを簡単に操作することが出来るAPI,JavaScript Cookie(js-cookie)をご紹介します. JavaScript Cookie | GitHub インストール方法はソースコードを上記リンクよりダウンロードして読み込むか,npmを使うか,あるいはCDNから利用するだけです.


<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

使い方はGitHub(下記リンク)のBasic Usageをご覧いただければ分かるかと思います. JavaScript Cookie Basic Usage | GitHub 一応,ここにも簡単に使い方をまとめて,〆させていただきます.


Cookies.set('username', 'seeker5084'); // "username=seeker5084"というCookieができる
Cookies.set('username', 'seeker5084', { expires: 7, secure: true }); // 7日の有効期限とsecureオプションを付与できる
Cookies.get('username'); // "seeker5084"を取得できる
Cookies.remove('username'); // "username"を削除できる

以上！！

722709161092369763 https://www.storange.jp/2018/09/javascriptcookie.html https://www.storange.jp/2018/09/javascriptcookie.html JavaScriptを使ってCookieで遊ぶ 2018-09-16T17:14:00+09:00 https://www.storange.jp/2018/09/javascriptcookie.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72