【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などの使い分けも出来ます。
ブラウザ側のデータの保存に活用してみてください。
