cookieとは、ブラウザを通じて一時的にホームページを見た人のコンピュータに書き込み、保存させるデータのことです。
cookieには、ホームページを見た人に関する情報や最後にホームページを見た時間、回数などのデータから識別して使用されることもあります。

この記事では、jquery.cookie.jsを使用したときとdocument オブジェクトのcookieプロパティを使用したときの保存・出力の方法をまとめています。

ぜひ参考にしてみて下さい。

jquery.cookie.jsを使う場合

まずはjquery.cookie.jsの使う場合からご紹介していきます。

jquery.cookie.jsの設置

今回は、jquery.cookie.jsをminify化された「jquery.cookie.min.js」を設置していきます。

jQueryの後に読み込みを行います。

今回CDNで設置していますが、ダウンロードしたい方はこちらからダウンロードできます。

<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>

cookieへの保存

こちらが保存するときの基本的な形になります。

<script>
  $.cookie('名前','値');
</script>

cookieへの出力

出力方法は以下のようになります。
cookieの値を取得して、変数へと代入します。

<script>
  var value = $.cookie('名前');
</script>

cookieの削除

以下のソースでcookieの情報が削除されます。

<script>
  $.removeCookie( '名前' );
</script>

実装

では、実際に実装していきたいと思います。

今回は、「+1」ボタンをクリックするとカウントがプラスされ、「0」ボタンをクリックすることでカウントがリセットされます。

カウントは、どちらかのボタンが押されたときに毎回cookieへ保存します。

See the Pen cookie.js by Jun Yamagami (@Jun-Yamagami) on CodePen.

※Codepenでは、cookieが保存されませんので、ここでは確認できないのですが、Visual Studio Codeなどご自身が使っているエディタにコピペして実際にローカル環境などでお試し下さい。

詳しく説明していくと、「var cookie = $.cookie('count-number');」の部分で「count-number」という名前のcookie情報を取得し、変数の「cookie」へ代入します。

次に変数「cookie」の値があるか確かめます。ある場合はその値を出力して表示します。ない場合は0を表示するようにしています。

次は、カウントをプラスしていく処理とリセットする処理になります。
まず今、出力している値を「count」という変数へ代入します。
もし「count-up」というクラスのボタンがクリックされたとき、変数の「count」に+1を行い、cookieへ保存、その値を出力という流れでカウントをアップします。

「count-reset」というクラスのボタンが押されたときは、変数の「count」を0にして、cookieへ保存、その値を出力となります。

以上が実装の流れとなります。

document オブジェクトのcookieプロパティを使う場合

document オブジェクトのcookieプロパティを使用して、cookieへ保存・出力する方法をご紹介します。

cookieへの保存

今回は、リロードした際に値をcookieへの保存するというソースを用意しました。
以下が、そのソースになります。

<script>
  $(document).ready(function () {
    document.cookie = 'reload=1';  // cookie保存
  });
</script>

まず、「$(document).ready(function () 」の部分では、リロードした際に内容を行うという処理を行っています。

次に、「document.cookie = 'reload=1';」では、cookieへ保存する内容を記述しています。
このソースでは、reloadという名前に1が保存されました。

cookieへの出力

ここまでcookieへの保存ができたと思います。

次に保存したcookieデータを出力する方法をご紹介します。

<script>
  var cookies = document.cookie;
</script>

上記の方法で、保存した情報を取り出すことができます。

cookieを削除

cookieを削除する方法は２通りあり、どちらの方法でも削除することができます。

有効期限（秒数）を指定する「max-age」を0にする方法と有効期限（日付）を指定する「expires」を過去の日付にする方法です。

<script>
  // 有効期限(秒数)の指定を０にする
  document.cookie = "削除対象の名前=; max-age=0";
  // 有効期限(日付)の指定を過去にする
  document.cookie = "削除対象の名前=; expires=過去の日付";
</script>

実装

document オブジェクトのcookieプロパティを使う場合での実装をしていきます。

サイトアクセスが1回目のときは「1回目のアクセスです」と表示して、2回目以降は「2回目以降のアクセスです」と表示されるようにしました。

See the Pen cookie by Jun Yamagami (@Jun-Yamagami) on CodePen.

※Codepenでは、cookieが保存されませんので、ここでは確認できないのですが、Visual Studio Codeなどご自身が使っているエディタにコピペして実際にローカル環境などでお試し下さい。

まず、「document.cookie.indexOf('access=1') === -1」の部分で「access=1」のデータがあるか確かめています。データが無かった場合は、「-1」が返されます。

当然、1回目のアクセスでは「access=1」というデータはないため、1回目のアクセス時の処理が通ります。
その際に、cookieへ「access=1」という値を保存する流れになります。

2回目以降のアクセスではcookieにという値が存在するので2回目以降の処理を通ります。

まとめ

ここまで、cookieへの保存・出力の方法をご紹介してきました。

今回は、jquery.cookie.jsを使う場合と、document オブジェクトのcookieプロパティを使う場合をご紹介してきましが、個人的にはjquery.cookie.jsを使用すると簡単に扱うことができると感じがします。

今回はシンプルなソースのみでしたが、jquery.cookie.jsを使用することで複雑になってもとても扱いやすい利用できると思います。

ぜひ、cookieへの保存・出力を行う際は、この記事を参考に実装してみてください。

js / jQuery