[Javascript] jQuery.Cookie を利用して Cookieにデータを書き込む
このページのタグ:[Javascript] [jQuery] [Cookie]
jQuery.Cookie を利用して Cookieに書き込むコードを紹介します。

概要

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の値を読み出すページにアクセスします。先のページで書き込んだCookieの値が画面に表示されていることが確認できます。

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