【jQuery入門】超簡単!jQuery.Cookieを使った読み書き方法まとめ

2024年4月29日

オータケ

こんにちは！エンジニアのオータケです！

皆さん、普段ネットサーフィンやブラウザでWebページを巡回している時にこんな文字をよく目にしませんか？

「Cookie」
「クッキー」

これらの言葉は今のWebアプリケーションを構築する上では必須と言っても過言ではないくらい当たり前に使われている技術です。

今回の記事ではjQueryを使ってこのクッキーを扱ってみようという記事になります。

この記事を見ていただくことで

［基本］ Cookieとは？
［基本］ jquery.cookie.jsを使ったデータ保存方法
［基本］ jquery.cookie.jsを使ったデータ取得方法
［基本］ jquery.cookie.jsを使ったデータ削除方法
［番外］ jquery.cookie.jsのCDNのURLについて

を理解することができます！

jquery.cookie.jsを使えばクッキー操作が簡単に行なえます！さっそく学んでいきましょう！

Cookieとは

まず、Cookie（クッキー）が何かを知る必要があります。

わかりやすくするために一言で簡単にまとめてしまえば、「何らかの情報を保存しておくための仕組み」です。

Webサイトを構築していてなにか情報を記録しておきたいなと思った際にはこのCookieに保存することがあります。

ただし、WebサイトへのログインIDやパスワードといった重要な情報や個人情報はCookieに保存すべきではないためこの点は注意しておく必要があります。

その情報を保存したり、保存したデータを取り出したりするためにどのようなことをすればよいかを見ていきましょう。

jquery.cookie.jsを使おう

準備

まず、クッキーを扱うためには少々面倒くさいため今回jquery.cookie.jsというjqueryを用いて簡単にクッキーへのデータ保存・取得が行えるライブラリを使っていきます。

このjquery.cookie.jsを使うには2種類の方法があります。

まずひとつめはダウンロードして使う方法です。

https://github.com/carhartl/jquery-cookie

こちらのURLからダウンロードして、srcフォルダの中に入っているjquery.cookie.jsを読み込みたいHTMLファイルと同じ場所に置きます。

そして、HTMLのソースコード上で

<script src="jquery.cookie.js"></script>

と書くことで読み込んで簡単にクッキーの保存や取得が行えるようになります。

ふたつ目はCDNサイトのURLから引っ張ってくるという方法です。

CDNとは解説するとややこしくなってしまう方もいるため今回は省略します。

ただし、この方法を使えばわざわざjquery.cookie.jsをダウンロードしなくてもとても簡単に準備することが可能です。

ファイルのダウンロードなどは行わずに、HTMLのソースコード上で次のように書くだけでOKです。

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

このように上記のようにURLを指定するだけですぐにクッキーを簡単に扱う機能が使えてしまうんです！

※両方の方法で必ずjQueryのライブラリを読み込んでおく必要があります。

もし、jQueryのライブラリを読み込めていない場合は次のようにすると良いでしょう。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

では早速、jquery.cookie.jsを使って保存処理を書いてみましょう！

保存

まず文字を保存してみたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<title>Cookieサンプル</title>
<body>

<script type="text/javascript">
$(document).ready(function() {
  var now = new Date()
  var message = 'こんにちは！' + now;
  $.cookie('message', message);
});
</script>
</body>
</html>

$.cookie()という機能を使うことで保存を行えます。

第一引数は保存しておく際のデータの名前を付けます。

そして第二引数は実際に保存する値を指定します。

この2つを指定することでデータを保存しておくことが可能です。

このサンプルでは保存をするだけだったので実際にデータが保存されているのかを確認できません。

次の項で取得する方法について見て、保存されているか見てみましょう。

取得

先程のサンプルコードを使ってメッセージがクッキーに保存されているかどうか見ていきましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<title>Cookieサンプル</title>
<body>

<div id="message"></div>

<script type="text/javascript">
$(document).ready(function() {
  var now = new Date()
  var message = 'こんにちは！' + now;
  $.cookie('message', message);
  
  $('#message').text($.cookie('message'));
});
</script>
</body>
</html>

先程のサンプルコードとは少し変わっています。

まずdivタグが追加され保存されたメッセージがここに表示されるような仕組みになっています。

先程と違うのは$.cookieが二回出てきています。

$.cookieは書き込みの処理だと解説しましたが、引数が一つだけの場合はその引数で指定した名前のデータを引っ張ってこいという意味に変わります。

そのため取得してdivタグの値を書き換えて画面にクッキーに保存された文字列を表示しています。

こんにちは！Tue May 22 2018 23:18:49 GMT+0900

保存も取得もそんなに難しくないかと思います。

配列変数を保存したいと思った場合も同じように第二引数に配列を指定して取得する際にはいつもどおり取得することで配列も扱うことができます！

削除

続いては削除について見てみましょう！

削除に関しては別の関数を呼び出す必要があります。

先程の保存→取得の流れのサンプルを改造し、保存→削除→取得でどうなるか試してみましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<title>Cookieサンプル</title>
<body>

<div id="message"></div>

<script type="text/javascript">
$(document).ready(function() {
  var now = new Date()
  var message = 'こんにちは！' + now;
  $.cookie('message', message);
  
  $.removeCookie('message');
  
  $('#message').text($.cookie('message'));
});
</script>
</body>
</html>

$.removeCookieという機能を保存の処理のあとに追加しました。

この機能は第一引数で指定したデータ名のデータを削除するという機能です。

削除後、取得してdivタグの中身を書き換えていますがデータ自体が削除されてしまっているため何も書き換わることがありません。