[Yahoo! UI Library] Cookie Utilityを使うサンプル

Yahoo! UI Library - Cookie Utilityを使うとCookieにさくっとアクセスできます。

1.必要なモジュールをインポートすれば、

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/cookie/cookie-min.js"></script>

2.「YAHOO.util.Cookie.get("<キー>")」で値を参照、
3.「YAHOO.util.Cookie.set("<キー>","<値>")」で値の設定が可能です
- 第3引数で、Cookieの有効期限などのオプションを指定することもできます。

以下はCookieを使ったカウンタのサンプルです。リロードでカウントアップします。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
  <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/cookie/cookie-min.js"></script>
  <script type="text/javascript">
    function main() {
      var stdout = document.getElementById("stdout");
      
      // Cookieのデータを取り出して、表示
      var str = YAHOO.util.Cookie.get("count");
      var count = str ? Number(str) : 0;
      stdout.innerHTML = count;

      // Cookieにデータを保存
      YAHOO.util.Cookie.set("count", count+1, {
        // オプションで有効期限等を設定できる。
        expires: new Date( new Date().getTime()+1000*60*60*24*365 ) // 有効期限を1年に設定。
        // path : "/",
        // domain: "foo.com",
        // secure : true
      });
    }
  </script>
</head>
<body onload="main();">
  <div id="stdout"></div>
</body>
</html>

実行結果はこちら