html5 の webStorage(localStorage)のテスト

html5 の機能で、ローカル環境にデータを保存するための機能 localStorage を試す。
ブラウザで永久的に保存できるのでブラウザを閉じても値は保存される。

このページも頑張れば備忘録とかTODOリストとして使えるかもしれない(^^;

キー(初期値はkey1)と値を紐づけて保存。
キーと紐づく値を読み出してポップアップ表示。
全ローカルストレージのクリア。
※ 入力された情報はサーバには送られません。

具体的な使い方
localStorage が使えるかどうか

  if (window.localStorage) {
    alert('localStorage は使える。');
  } else {
    alert('localStorage は使えない。');
  }

if (window.localStorage) {

alert('localStorage は使える。');

} else {

alert('localStorage は使えない。');

}

関数	機能
localStorage.setItem(key, value);	key と value をペアにして保存
localStorage.getItem(key);	key に対応する値を取得
localStorage.removeItem(key);	key に対応する値を削除
localStorage.clear();	全データを消去
localStorage.length	格納された数を取得
localStorage.key(index);	index番目のキーを取得

Chrome なら要素を検証 → Resources → Local Storage で保存内容を確認できる。