Javascriptista

クッキーはブラウザ単位でデータを保存してくれるが、ウィンドウ、タブ単位でデータを管理する手法です。
SAMPLE
厳密に言うとHTTPセッション単位でデータ管理します。

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

・SeesionStrageについて
HTTPセッション単位でデータ管理します。
クッキーのような有効期限などのオプション設定はない。
※新しいウィンドウ、タブとして開いた場合
ほとんどのブラウザがデータを消失します。が、I.E.9の場合は残すようです。

※新しいタブとしてい開いた場合

Firefox 12.0	データ消失
Safari 5.0	データ消失
Chrome 19.0	データ消失
I.E. 9.0	データ継続

---

<script type="text/javascript">
window.onload=function(){
  document.getElementById('set').onclick = setData;
  document.getElementById('get').onclick = getData;
  document.getElementById('erase').onclick = removeData;

  document.getElementById('innerDiv').innerHTML = document.cookie;
  document.getElementById('innerDiv2').innerHTML = joinSessionStrage();

}

function setData(){

  var key = document.getElementById('key').value;
  var value = document.getElementById('value').value;
 
  sessionStorage.setItem(key,value);
  setCookie(key,value);

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

function getData(){

    var key = document.getElementById('key').value;
    
    var alertStr;

    var value = sessionStorage.getItem(key);
    if(!value){
      value = '';
    }
    alertStr = '【sessionStrage:】' + value + '\n\r';
    
    value = getCookie(key);
    if(!value){
      value = '';
    }
    alertStr += '【cookie:】' + value;

    alert(alertStr);
}

function removeData(){
  var key = document.getElementById('key').value;
  sessionStorage.removeItem(key);
  eraseCookie(key);

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

function joinSessionStrage(){
  var str = '';
  for(var i = 0; i<sessionStorage.length;i++){
    var curKey = sessionStorage.key(i);
    str += curKey + '=' + sessionStorage.getItem(curKey) + ';';
  }
  return str;
}



function setCookie(key,value){
  //expires設定
  var futureDate = new Date();
  futureDate.setSeconds(futureDate.getSeconds() + 3000);
 
  var tmp = key + '=' + encodeURI(value) + '; expires=' + futureDate.toGMTString() + '; path=/';
  document.cookie = tmp;

}

function getCookie(key){
  var cookie = document.cookie;
  var first = cookie.indexOf(key + '=');

  if(first < 0){
    return null;
  }

  var str = cookie.substring(first,cookie.length);
  var last = str.indexOf(';');
  if(last < 0){
    last = str.length;
  }
 
  str = str.substring(0,last).split('=');
  return (decodeURI(str[1]));
}

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

---

1.データを設定します。
2.データを取得します。
3.データを削除します。
4.データを繰り返し文で全て取得しています。

※その他
firefoxの場合、ローカルのHTMLとしてテストするとエラーが発生します。
"Operation is not supported"
サーバーにアップすれば問題ありません。