PHP & JavaScript Room :: 設置サンプル

実行結果

参照：jQuery: Cookie plugin

クッキーの取得・設定・削除

取得したクッキーの内容：

取得した追加クッキーの内容：

設置サンプルのソース

<!DOCTYPE html>
<html lang="ja">
   <head>
   <meta charset="utf-8">
   <title>設置サンプル</title>
   <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
   <!-- JS -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script src="/content/lib/jquery/jquery.cookie.js"></script>
   <script>
      $(function () {
            var COOKIE_NAME = 'test_cookie';
            var ADDITIONAL_COOKIE_NAME = 'additional';
            var options = { path: '/', expires: 10 };
            // set cookie by number of days
            $('li a').eq(0).click(function() {
                $.cookie(COOKIE_NAME, 'test 10days', options);
                return false;
            });
            // set cookie by date
            $('li a').eq(1).click(function() {
                var date = new Date();
                date.setTime(date.getTime() + (3*24*60*60*1000)); /* 3日間 */
                $.cookie(COOKIE_NAME, 'test 3days', { path: '/', expires: date });
                return false;
            });
            // get cookie
            $('li a').eq(2).click(function() {
                $("#res1").text($.cookie(COOKIE_NAME));
                return false;
            });
            // delete cookie
            $('li a').eq(3).click(function() { 
                $.cookie(COOKIE_NAME, null, options);
            //$.cookie('COOKIE_NAME', '', { expires: -1 }); 
                $("#res1").text("");
                return false;
            });
            // set a second cookie
            $('li a').eq(4).click(function() {
                $.cookie(ADDITIONAL_COOKIE_NAME, 'foo=bar;foo2=bar2', { expires: 10 });
                return false;
            });
            // get second cookie
            $('li a').eq(5).click(function() {
                $("#res2").text($.cookie(ADDITIONAL_COOKIE_NAME));
                return false;
            });
            // delete second cookie
            $('li a').eq(6).click(function() {
                $.cookie(ADDITIONAL_COOKIE_NAME, null);
            //$.cookie('ADDITIONAL_COOKIE_NAME', '', { expires: -1 }); 
                $("#res2").text("");
                return false;
            });
      });
   </script>
   <!-- CSS -->
   <style type="text/css">
      span { color:red; }
   </style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<!-- CONTENT -->
   <p>参照：<a href='http://plugins.jquery.com/project/Cookie'>jQuery: Cookie plugin</a></p>
   <div id="res">
<!-- CODE -->
      <p>クッキーの取得・設定・削除</p>
      <ul>
         <li><a href="#">クッキー設定 (by number of days == 10)</a></li>
         <li><a href="#">クッキー設定 (by date == 3 days)</a></li>
         <li><a href="#">クッキー取得</a></li>
         <li><a href="#">クッキー削除</a></li>
      </ul>
      <p>取得したクッキーの内容：<span id="res1"></span></p>
      <ul>
         <li><a href="#">追加クッキー設定</a></li>
         <li><a href="#">追加クッキー取得</a></li>
         <li><a href="#">追加クッキー削除</a></li>
      </ul>
      <p>取得した追加クッキーの内容：<span id="res2"></span></p>
<!-- / CODE -->
   </div>
<!-- / CONTENT -->
</body>
</html>