jQuery.Cookie を利用して Cookieに書きこまれたデータを読み込む - jQuery

jQuery.Cookie を利用して Cookieに書き込まれた値を読み出すコードを紹介します。

概要

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

事前準備

jQuery と jQuery.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>

コード

下記のコードを記述します。
<!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への書き込みページにアクセスし、Cookieに値を書き込んだ状態で、上記のHTMLファイルにアクセスすると、Cookieに書き込まれた値が表示できます。


著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-06
作成日: 2015-12-21
iPentec all rights reserverd.