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

このページのタグ:[Javascript] [jQuery] [Cookie]
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に書き込まれた値が表示できます。


登録日 :2015-12-21    最終更新日 :2015-12-29
このページのタグ:[Javascript] [jQuery] [Cookie]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)