JavaScript:HTML5の標準機能！WebStorageの仕様と使い方

Webアプリケーション開発においてWebStorageを使用する機会があったので、使い方をメモしておきます。
とても便利な機能なので、アプリの設定等の保存に活躍するかと思います。

WebStorageについて

種類

以下の2つのストレージがありますが、データの永続性の違いだけで、どちらも使い方は同じです。今回は localStorage について説明したいと思います。

• sessionStorage
• localStorage

対応するブラウザのバージョン

IE7対応を強いられる方たちには申し訳ないですが、以下の表を見る限り、実用可能と考えて問題なのではないでしょうか。

ストレージの容量

• 最大5MB

設定データの保存としては必要十分な容量だと思います。

WebStorageの使い方

使い方はとても簡単です。key,value を使用してストレージに保存していきます。
valueへはどんな型でも保存は可能ですが、最終的に保存されるデータは文字列となるので、getした値を文字列として使用しない場合はキャストが必要になります。

基本操作

データをセット（保存）する

[code]
window.localStorage.setItem(key,value);
[/code]

キーからデータをゲット（取得）する

[code]
window.localStorage.getItem(key);
[/code]

キーごとにデータを削除する

[code]
window.localStorage.removeItem(key);
[/code]

すべてのキーと値を削除する

[code]
window.localStorage.clear();
[/code]

ログ出力とセットにしたlocalStorageの関数も作成しました。

[code]
// Local Storage Functions

function setLocalStorage(key,value) {
console.log(‘set localStorage ‘+’key->’+key+’, value->’+value);
window.localStorage.setItem(key,value);
}

function getLocalStorage(key) {
console.log(‘get localStorage ‘+’key->’+key+’, value->’+window.localStorage.getItem(key));
window.localStorage.getItem(key);
}

function deleteAllStorage() {
console.log(‘delete all localStorage’);
window.localStorage.clear();
}

function deleteStorage(key) {
console.log(‘delete localStorage key->’+key);
window.localStorage.removeItem(key);
}
[/code]

その他の使い方

キーのインデックス値でアクセスする

[code]
var str = localStorage.key(0);
[/code]

キーを列挙する

[code]
for (i in localStorage){
console.log(localStorage.key(i));
}
[/code]

キーの長さを取得する

[code]
var len = localStoage.length;
[/code]

localStorageのデータが保存されている場所(*)

Safari

/Users/User名/Library/Safari/LocalStorage/

Chrome

/Users/User名/Library/Application Support/Google/Chrome/Default/Local Storage/

※マシン環境は Mac OS X です

まとめ

WebStorage は HTML5で実装された標準機能ですが、実用レベルに耐えられる便利な機能だと思います。
W3C による HTML5 の勧告はもうすぐですが、HTML5 というワード自体は珍しいものでなくなりました。デファクトスタンダードだと判断できるのは、そのもの自体が騒がれなくなったときだということなのでしょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。