Javascriptista

かなり古い技術だけど健在。
今ではセッションIDを格納してるだけかもしれませんが、｢捨てられても構わない情報」(画面の一時的な操作情報など）を格納しておくには便利です。
SAMPLE

Firefox 12.0	○
Safari 5.0	○
Chrome 19.0	○
I.E. 9.0	○

基本的には、キーと値のペアの単純な構造。
それぞれのキーと値のペアに大して以下の項目を設定できる。
・path
・max-age
秒数で指定。
・expires
GMT形式の日付で表示
・secure
HTTPSでのみ送信可能となる。

クッキーで間違えやすいところ。
・上記オプションは、キーと値のペア単位で機能する。クッキー単位ではない。
なので、様々なキーと値のペアが異なる消失期限で生存可能。

---

<script>

window.onload=function(){
  if(navigator.cookieEnabled){
    document.getElementById('set').onclick = setCookie;
    document.getElementById('get').onclick = readCookie;
    document.getElementById('erase').onclick = eraseCookie;
  }
  document.getElementById('innerDiv').innerHTML = document.cookie;
}

function setCookie(){
  var cookie = document.getElementById('cookie').value;
  var value = document.getElementById('value').value;

  var futureDate = new Date();
  //expires設定
  var expire = document.getElementById('expire').value;
  futureDate.setSeconds(futureDate.getSeconds() + parseInt(expire));
 
  var tmp = cookie + '=' + encodeURI(value) + '; expires=' + futureDate.toGMTString() + '; path=/';
  document.cookie = tmp;

  document.getElementById('innerDiv').innerHTML = document.cookie;
}

function readCookie(){
  var key = document.getElementById('cookie').value;
  var cookie = document.cookie;
  var first = cookie.indexOf(key + '=');
 
  if(first >= 0){
    var str = cookie.substring(first,cookie.length);
    var last = str.indexOf(';');
    if(last < 0){
      last = str.length;
    }
    
    str = str.substring(0,last).split('=');
    alert(decodeURI(str[1]));
    
  }else{
    alert('none found');
  }
  document.getElementById('innerDiv').innerHTML = document.cookie;
}

function eraseCookie(){
  var key = document.getElementById('cookie').value;
  var cookieDate = new Date();
  cookieDate.setDate(cookieDate.getDate() -10);
  document.cookie = key + '= ; expires=' + cookieDate.toGMTString() + '; path=/';

  document.getElementById('innerDiv').innerHTML = document.cookie;
}
</script>

---

1.クッキーにキーと値ペアを設定。オプションでexpiresとpathを設定。
2.文字列操作でクッキーからキーと値を抽出する。セミコロン(;)で区切られたキーと値ペアなので、特筆なし。
3.クッキーからキーと値のペアを削除。過去の日付すれば自動的に消える。

ちなみにjavascriptのcookieのAPIはいまいちに感じる。
document.cookie = 変数
変数 = document.cookie
上記二つの値が異なってくる。cookieに対するAPIを自分でモジュール化しているほうがよさそう。