jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

システム
エンジニア

jquery.cookie.jsの操作方法を教えてください。

プロジェクト
マネージャー

jquery.cookie.jsの操作方法を見ていきましょう。

jQueryのcookieとは

jQueryは様々な機能を持つJavaScriptのライブラリですが、標準で存在しない機能もあります。その1つがcookie（クッキー）の操作です。ところがjquery.cookie.jsを追加すれば、jQueryでもcookieの操作が可能になるのです。

jQueryを利用するには、htmlファイルのheadタグ内に以下のような記述が必要です。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

そしてjquery.cookie.jsを利用するには、さらに以下を追加してください。

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

cookieとは何か？

そもそもcookieとは何なのでしょうか。cookieはサイトを閲覧した時に、そこで利用するデータを保存してくれる機能です。IDやパスワードなどサイトで利用する情報などが記録されます。この機能のおかげでサイトを訪れるたびにログインをする必要がなくなり、以前の状態のまま利用を再開することができます。

cookieの読み込みと保存はそのデータを利用するサイトだけが行えるので漏洩の危険はありませんが、パソコンやスマホを他人が操作すると、IDとパスワードを知らなくても利用できてしまう可能性はあります。そういった理由から、cookieを利用していることを最初に明示するサイトも多くなっています。

cookieメソッドで利用可能なパラメータとは？

ここからは、cookieメソッドで利用可能なパラメータを紹介します。cookieメソッドで指定するパラメータは基本的に文字列を使用することになります。cookieの有効期間などの設定を指定する場合はJsonを使用しましょう。

1：cookieの作成

セッションcookieを作成する場合は以下のように2つの引数を指定します。第1引数にcookieの名前（キー）、第2引数にcookieの値を指定しましょう。cookieは、キーと値の組み合わせで作成します。

コード

2：期限付きcookie

次に、期限付きcookieの作成方法です。期限を指定することで、その期間だけ有効なcookieを作成することができます。cookieを作成する時の引数に加え第3引数にJson形式で期間を指定します。

コード

3：cookieの取得

次はcookieの取得です。cookieのデータを取得する場合は、第1引数のみ指定します 。文字列で作成の時に指定したcookieの名前を指定しましょう。返り値にcookieの値が返されます。

コード

jquery.cookie.jsの操作方法6つ

ここからは、jquery.cookie.jsの操作方法を6つ紹介します。簡単なサンプルコードからcookieの取得、削除や、jquery.cookie.jsを使用せずcookieの操作をした場合の処理の違いを解説していきます。

1：cookieの簡単なサンプル

それでは簡単なサンプルを実行してみましょう。htmlのbodyタグ内は以下のように記述します。
リロードでカウントします。

jQueryはscriptタグ内に以下のように記述します。

2：$.cookie(‘cookie名’)で読み込む

jQueryのコードを解説しましょう。まず$(document).ready(function() {～});とありますが、これはページ全体を読み込んだらfunctionの内容を実行するという意味です。その中ではまず$.cookie(‘test_cookie’)でtest_cookieと言う名前のcookieを読み込んでいます。

3：$.removeCookieで削除ができる

cookieを読み込めたらcntに代入して、$(‘div’).textでdivタグにその内容を追加して表示します。読み込めなかった場合は0を表示し、cntも0で初期化します。その後cntを1加算し、10を超えたら$.removeCookieでcookieを削除して、appendで「消しました」というメッセージをdivタグに追加します。
cntが10を超えなければ$.cookieでtest_cookieに加算したcntの内容を保存しています。cookieの読み込みと保存、削除は簡単に行うことができます。

4：オプションの設定

$.cookieは保存時にオプションをつけることができます。今回のサンプルの保存している箇所を以下のようにすることができます。
$.cookie(‘test_cookie’,cnt,{expires:10, path:’/’, domain:’～.com等のドメイン名’, secure:true});
expires:は保存する日数です。省略するとブラウザを終了した時に消えてしまうので、指定は必須でしょう。path:はcookieを使用するURLのパスです。サイト全体で使用する場合は/にします。domainはこのcookieの有効なドメイン、secureはtrueにするとhttps://のWebページのみ有効になります。

5：jquery.cookie.jsを使わない場合

jquery.cookie.jsを使わずにJavaScriptだけでcookieを扱うことも可能です。ここまでのサンプルをjquery.cookie.jsを使わずに書き換えたものが以下になります。

6：document.cookieは全部のcookieが返ってきてしまう

jquery.cookie.jsの場合は$.cookie(‘Key名’);でcookieを取得できます。ところがJavaScriptの場合、document.cookieでしかデータを取得できず、それで取得すると、
key名=値;key名=値;key名=値…
のようにすべてのcookieがつながった1つの文字列として帰ってきます。そのためこのサンプルのように、まずsplitで;で区切り、forループでさらに=で区切ってkeyを1つずつチェックして、欲しいkeyだったら値を取得するといった処理が必要になります。

cookieを使ったサンプルコードとは？

Jquery.cookie.jsでcookieを使用したサンプルコードと実際のHTMLコンテンツを作成しました。cookieを使用している部分は、JavaScriptになります。

キャンペーン情報ボックスの設置コードサンプル

cookieを使用すれば閲覧者の訪問情報を保持することができるため、一度非表示にしたらその後のページ遷移で表示させないようにすることが可能です。

今回は、キャンペーン情報ボックスを例に、cookieを使用して一度非表示にしたらその後表示をさせないJavaScriptのコードを紹介します。

カウントアップ・リセットのサンプル

次は、cookieを使用してボタンのクリック数を保持する方法です。カウントアップボタンで1ずつ加算されます。この時cookieの値も加算することで、次にページを訪れた時にも同じ数値を表示することができます。

jquery.cookie.jsのメリット

なお、このサンプルはサーバー上で実行しないと正しく動作しません。ローカルPC環境ではcookieを使う意味がないため、cookieの読み込みや保存が行えないのです。

実行すると0という数字が表示されます。F5でブラウザをリロードすると1,2,3…と増えていって、10で消しましたと表示されて、リロードするとまた0に戻ります。この間、いったんページを閉じて又開いても、続きからカウントされます。これがcookieの機能です。

jquery.cookie.jsのデメリット

cookieに保存する時も、’キー名=’ + 変数名のようにして1つの文字列として保存する必要があります。またcookieを消す場合はexpires=0にして期限なしにしてすぐ消えるようにするといった、スマートでないやり方をするしかありません。

このようにJavaScriptのcookie操作はあまり使いやすくないのです。jQueryのjquery.cookie.jsを使った方が手軽でシンプルなコードになることが、分かって頂けたのではないでしょうか。

システム
エンジニア

jquery.cookie.jsの操作方法にはいくつかあるのですね。

プロジェクト
マネージャー

はい。紹介した方法を参考にして、実際にコードを書いてみましょう。

jQueryのjquery.cookie.jsは便利

jQueryのjquery.cookie.jsについて解説しましたが、ご理解頂けましたでしょうか。

JavaScriptでもcookie操作はできますが、jQueryのjquery.cookie.jsの方が使い易いです。
そのため、jQueryのjquery.cookie.jsは便利だといえるでしょう。