.net column
.NET開発者のためのブログメディア

データベース

jQueryのcookieとは?jQueryのcookieの操作方法を解説!

2021年03月12日

SE
jQueryでのcookie操作方法にはどのような方法があるのでしょうか?

PM
まずcookieについて理解していきましょう。

jQueryのcookie操作の方法を解説!

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の簡単なサンプル

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

リロードでカウントします。<br />
<div></div>

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

$(document).ready(function() {
var tc = $.cookie(‘test_cookie’);
var cnt;
if(tc){
cnt = tc;
$(‘div’).text(tc);
} else {
$(‘div’).text(0);
cnt = 0;
}
cnt++;
if (cnt > 10) {
$.removeCookie(‘test_cookie’);
$(‘div’).append(‘ 消しました’);
} else {
$.cookie(‘test_cookie’,cnt);
}
});

cookieを使えばブラウザを閉じても継続できる

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

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

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

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

$.removeCookieで削除ができる

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

cntが10を超えなければ$.cookieでtest_cookieに加算したcntの内容を保存しています。cookieの読み込みと保存、削除は簡単に行うことができます。

オプションの設定

$.cookieは保存時にオプションをつけることができます。今回のサンプルの保存している箇所を以下のようにすることができます。

$.cookie(‘test_cookie’,cnt,{expires:10, path:’/’, domain:’~.com等のドメイン名’, secure:true});

expires:は保存する日数です。省略するとブラウザを終了した時に消えてしまうので、指定は必須でしょう。path:はcookieを使用するURLのパスです。サイト全体で使用する場合は/にします。domainはこのcookieの有効なドメイン、secureはtrueにするとhttps://のWebページのみ有効になります。

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

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

$(document).ready(function() {
var cks = document.cookie;
var cks_ary = cks.split(‘;’);
var val;
for(var c of cks_ary){
var ary = c.split(‘=’);
if( ary[0] == ‘test_cookie’){
val = ary[1];
}
}
if(val){
cnt = val;
$(‘div’).text(cnt);
} else {
$(‘div’).text(0);
cnt = 0;
}
cnt++;
if (cnt > 10) {
document.cookie = ‘test_cookie=; expires=0’;
$(‘div’).append(‘ 消しました’);
} else {
document.cookie = ‘test_cookie=’ + cnt;
}
});

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

jquery.cookie.jsの場合は$.cookie(‘Key名’);でcookieを取得できます。ところがJavaScriptの場合、document.cookieでしかデータを取得できず、それで取得すると、

key名=値;key名=値;key名=値…

のようにすべてのcookieがつながった1つの文字列として帰ってきます。そのためこのサンプルのように、まずsplitで;で区切り、forループでさらに=で区切ってkeyを1つずつチェックして、欲しいkeyだったら値を取得するといった処理が必要になります。

JavaScriptのcookie操作はスマートではない

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

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

SE
jQueryを利用した方がkookie操作がシンプルになるんですね。

PM
cookieの特性を理解した上で、効率よく取得・保存・削除ができます。

jQueryのjquery.cookie.jsは便利

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs