LocalStorageの使い方

 WebStorageの機能の1つとして、LocalStorageというものが用意されている。これは、ブラウザのページが遷移したり、ブラウザが終了しても消えないデータ領域である。

 標準規格ではLocalStorageのI/Fはグローバル変数localStorageに定義されているが、古いブラウザではglobalStorageやwindow.localStorageに定義されていたりする。そこで、クロスブラウザ対応のために下記のように記述する。

if(typeof localStorage!="object" && typeof globalStorage=="object"){localStorage=globalStorage[location.host];}
if(typeof localStorage!="object" && typeof window.localStorage=="object"){localStorage=window.localStorage;}
if(typeof localStorage!="object"){localStorage=null;}

localStorageはHashのようなデータ構造を持つが、JavascriptのObject型のようなアクセスはできない。その代わりに、setItem(), getItem(), removeItem(), clear(), key(i)といったメンバ関数やlengthといったメンバ変数が定義されている。使い方の例を下記に示す。


localStorage.setItem(‘itemName’,’itemValue’); // 要素を設定する。
var itemValue=localStorage.getItem(‘itemName’); // 要素を取得する。
localStorage.removeItem(‘itemName’); // 要素を削除する。
localStorage.clear(); // ローカルストレージを空にする。
var count=localStorage.length; // ローカルストレージの要素数
localStorage.key(0); // indexから要素名を取得する。

for(var i=0; i

カテゴリー: html5_storage   タグ: , ,   この投稿のパーマリンク

コメントを残す