html5

【HTML5】WebStorageを使ってみよう!



HTML5で実装されたWebStorageを使って、データの保存をやってみます。

ブラウザ上でのデータ保存に関しては既存の技術ですとCookieがありますが、WebStorageは更に扱いやすく保存容量も多いのです。

仕様

WebStorageには2種類あり、ウィンドやタブが閉じるまで有効なsessionStorageと永続的にデータを保存するlocalStorageです。

わかりやすようにWebStorageとCookieを比較致しました。


Cookie、sessionStorage、localStorage比較

  共有 有効期限 データ量 通信
Cookie 同一ブラウザ内 指定期限まで有効 4KB サーバーへアクセスする度に毎回自動送信
sessionStorage タブ内のみ タブが閉じるまで 1オリジン当たり5MB 発生しない
localStorage 永続的に有効

使い方

WebStorageにはsesssinStorage、localStorageの2つありますが、使い方は基本的に一緒です。

保存・取得・削除

WebStorageの基本的な使用チェック、保存、取得、削除を以下にまとめました。

例はsesssinStorageにしていますが、sesssinStorage→localStorageとするとlocalStorageに保存されます。

// localStorageが使用出来るかチェック
if (typeof sessionStorage === 'undefined') {
	alert("お使いのブラウザはsessionStorageに対応してません。");
}

// sesssinStorageに値を保存
sessionStorage.setItem("key", "value");

// sesssinStorageから値を取得
sessionStorage.getItem("key");

// sesssinStorageに保存されている、あるkeyの値を削除する
sessionStorage.removeItem("key");

// sesssinStorageに保存されているすべての値を削除する
sessionStorage.clear();

ストレージの監視

ストレージを監視して変更を取得します。

ただし、これは変更を行った画面とは別の画面でしか監視することは出来ません。なのでlocalStorageでしか使用することが出来ませんのでご注意ください。

window.addEventListener('storage', function(e) {
	console.log(e.key);
	console.log(e.oldValue);
	console.log(e.newValue);
	console.log(e.url);
	console.log(e.storageArea);
});

Eventのプロパティ一覧

プロパティ 説明
key イベント発生のキー
newValue 変更後の値(登録/更新時)
oldValue 変更前の値(更新/削除時)
url 発生元のURL
storageArea ストレージオブジェクト

サンプル

localStorageとsessionStorageの保存、読み込み、削除のサンプルです。

上のサンプルのlocalStorageを変更すると下のサンプルで表示されます。


Cookieと違い自動的にサーバーに送信されることがないので通信量が減ったり、大量のデータの保存が出来るなどの利点があります。

また、必要に応じて永続的にデータを保存するlocalStorageとそのセッションでのみ有効なsessionStorageなどの使い分けも出来ます。

ブラウザ側のデータの保存に活用してみてください。



コメントを残す