iPentec.com / Document / カテゴリ: Javascript / タグ: Javascript jQuery Cookie

1 概要
2 事前準備
3 Cookieへの書き込み
- 3.1 書式
- 3.2 記述例
- 3.3 実装例
  - 3.3.1 コード
  - 3.3.2 実行結果
4 Cookieからの読み込み
- 4.1 書式
- 4.2 実装例
  - 4.2.1 コード
  - 4.2.2 実行結果
5 Cookieの削除・クリア
- 5.1 書式
- 5.2 実装例
  - 5.2.1 コード
  - 5.2.2 実行結果
- 5.3 別の方法

Cookieの読み込み、書き込み、削除のコードと実行結果

1 概要
2 事前準備
3 Cookieへの書き込み
- 3.1 書式
- 3.2 記述例
- 3.3 実装例
  - 3.3.1 コード
  - 3.3.2 実行結果
4 Cookieからの読み込み
- 4.1 書式
- 4.2 実装例
  - 4.2.1 コード
  - 4.2.2 実行結果
5 Cookieの削除・クリア
- 5.1 書式
- 5.2 実装例
  - 5.2.1 コード
  - 5.2.2 実行結果
- 5.3 別の方法

jQuery.Cookie を利用して Cookieへの書き込み、読み込み、削除のコードと実行結果を紹介します。

概要

jQuery.Cookie を利用すると、シンプルなコードでCookieへ情報の書き込みや、読み込みができます。また、パーシングの必要なくCookieに書き込まれたキーに対する値を読み出すことができます。

jQueryを使わない場合

jQueryを利用しないでJavaScriptでCookieを操作するコードは以下の記事を参照してください。

事前準備

jQuery と jQuery.Cookie をダウンロードします。

jQueryのダウンロードは https://jquery.com/ からダウンロードできます。
jQuery.Cookieのダウンロードは https://github.com/carhartl/jquery-cookie からダウンロードできます。

Cookieへの書き込み

書式

Head部にjQuery と jQuery.Cookie のScriptタグを記述します。

  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>

以下のコードで書き込みができます。

  $.cookie([キー名], [値]);

書き込みオプションの指定をする場合は以下の記述になります。

  $.cookie([キー名], [値], {[オプションの記述]});

記述例

パスを指定する場合

$.cookie('Test', '100', {path: '/' });

有効期限を指定する場合

$.cookie('Test', '100', { expires: 7});

ドメインを指定する場合

$.cookie('Test', '100', {domain: 'ipentec.com' });

セキュア属性を指定する場合

$.cookie('Test', '100', {secure: true});

パス、有効期限を指定する場合
複数のオプションを指定する場合は"," で区切り記述します。

$.cookie('Test', '100', { expires: 3, path: '/data' });

実装例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.cookie("Name", "ペンギン", { expires: 14 });
      $.cookie("Age", "3", { expires: 14 });
      $("#msg").text("Cookieに書き込みました。");
    })
  </script>
</head>
<body>
  <div id="msg"></div>

</body>
</html>

実行結果

上記のHTMLファイルにWebブラウザでアクセスします。下図の画面が表示されます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像1

以下で紹介しているCookieの値を読み出すページにアクセスします。先のページで書き込んだCookieの値が画面に表示されていることが確認できます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像2

Cookieからの読み込み

書式

Head部にjQuery と jQuery.Cookie のScriptタグを記述します。

  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>

以下のコードで読み込みができます。

  $.cookie([キー名]);

実装例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      var valueName = $.cookie("Name");
      var valueAge = $.cookie("Age");

      $("#msg").html("Cookieの内容(Name): " + valueName + "<br/>" + "Cookieの内容(Age): " + valueAge);

    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

実行結果

上記のHTMLファイルにWebブラウザでアクセスします。
Cookieに値が書き込まれていない状態では、"undefined"が表示されます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像3

先に紹介した、Cookieへの書き込みページにアクセスし、 Cookieに値を書き込んだ状態で、上記のHTMLファイルにアクセスすると、Cookieに書き込まれた値が表示できます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像4

Cookieの削除・クリア

書式

以下の removeCookie() メソッドを利用します。

$.removeCookie([削除するCookieのキー名]);

実装例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.removeCookie("Name");
      $.removeCookie("Age");

      $("#msg").text("Cookieをクリアしました。");
    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

実行結果

Cookieに値が書き込まれている状態にします。書き込まれている値を確認します。Cookieに書き込まれている値を参照するコードはこちらの記事を参照してください。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像5

上記のHTMLファイルにWebブラウザでアクセスします。下図の画面が表示されます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像6

先ほどのCookieの値を確認するページをWebブラウザで開きます。値がクリアされ、"undefined" になっていることが確認できます。
Cookieの読み込み、書き込み、削除のコードと実行結果:画像7

別の方法

別の方法として、Cookieの値書き込み時にnullを与えて、nullで上書きする方法があります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.cookie("Name", null);
      $.cookie("Age", null);

      $("#msg").text("Cookieをクリアしました。");

    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

また、Expires に -1を与えてCookieを有効期限切れにして、クリアする方法もあります。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
  <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    $(document).ready(function () {
      $.cookie("Name","", {expires: -1});
      $.cookie("Age", "", {expires: -1});
      $("#msg").text("Cookieをクリアしました。");
    });
  </script>

</head>
<body>
  <div id="msg"></div>
</body>
</html>

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

作成日: 2015-12-30

目次

Cookieの読み込み、書き込み、削除のコードと実行結果

目次

概要

事前準備

Cookieへの書き込み

書式

記述例

実装例

コード

実行結果

Cookieからの読み込み

書式

実装例

コード

実行結果

Cookieの削除・クリア

書式

実装例

コード

実行結果

別の方法

関連するページ