開発部のMです。
今回は、HTML5で導入された新機能の1つ、WebStorageについての紹介です。
WebStorageとは
WebStorageとは、HTML5で導入されたブラウザでデータの永続化を行う仕組みのことです。
特徴としては、
* 比較的大容量の文字列データを保存できる
* Key-Value型のシンプルなインターフェイス
* 保存/取得処理に通信を伴わない
などがあります。
今までは、毎回サーバにアクセスし、保存/取得処理されていたブラウザ固有のデータをブラウザ内で完結させることができます。
また、最近使われている大多数のブラウザで使用できる(Chrome、FireFox、Safari、Opera、IE8~)ので、安心して使えます。
WebStorageと似た技術で、今まではCookieがありました。違いについて、簡単にまとめてみました。
(localStorageとsessionStorageの違いは、後で説明しています)
|
WebStorage |
Cookie |
Origin毎の保存容量 |
5MB (仕様上) |
4KB |
有効期限 |
なし (localStorage) |
あり |
通信 |
jsで実装する必要がある |
勝手に送信される |
個数制限 |
なし |
20個 (仕様上) |
pathの設定 |
Originで共通 |
できる |
標準API |
比較的簡単 |
煩雑な文字列操作 |
ウィンドウ間でのデータの共有 |
できる (localStorage) |
できる |
スコープ |
Origin単位 |
host/path単位 |
有効期限を設定したい場合や常にデータを送信したい場合、特定のpath以下のみのアクセスを許可したい場合など、
Cookieでしかできないこともありますが、データ保存に関しては、WebStorageに利点が多いです。
WebStorageの種類
WebStorageには、用途に応じて2種類のストレージが用意されています。違いについて、簡単にまとめてみました。
|
locakStorage |
sessionStorage |
有効期限 |
なし(削除されるまで) |
ウィンドウ(タブ)を閉じるまで |
ウィンドウ(タブ)間での データの共有 |
できる |
できない |
基本的な機能については、共通です。1点だけ異なっており、
localStorageは、Origin(scheme://hostname:port/)にスコープしており、
sessionStorageは、更にTop-level browsing context(ウィンドウ、タブなど)にスコープした
Storageである点が差異です。(※sessionStorageは、Webアプリなどのログインセッションとは同期してないです)
用途としては、localStorageはデータの永続化、sessionStorageは一時データの保存になると思います。
WebStorageの使い方
コードを示しながら、説明します。
(localStorageもsessionStorageも同じインターフェイスを備えてます。ここでは、sessionStorageをサンプルとします。)
if (typeof sessionStorage === 'undefined')
alert('sessionStorage is not found');
sessionStorage['key'] = 'value';
console.log(sessionStorage['key']);
sessionStorage['objKey'] = JSON.stringify({key: [1, 2, 3]});
console.log(JSON.parse(sessionStorage['objKey']));
sessionStorage.removeItem('key');
sessionStorage['prefix.key'] = 'value';
Object.keys(sessionStorage)
.filter(function(k) {
return k.split('.')[0] === 'prefix';
}).each(function(k) {
sessionStorage.removeItem(k);
});
sessionStorage.key(0);
sessionStorage.length;
Object.keys(sessionStorage);
localStorage['key'] = 'old';
window.addEventListener('storage', function(e) {
console.log(e);
});
※Storageのデータは、Originで共有されるので、複数の機能で使用する場合、削除や上書きに気をつけてください。
使い分け
Cookie、localStorage、sessionStorageの違いを簡単に説明してきました。ここでは、それぞれの用途について考察してみたいと思います。
容量が少なく、常にサーバとデータを共有しているCookieはログインセッションの管理が主な用途になると思います。
localStorage
ブラウザ毎にデータを永続的に保存できるので、設定の保存目的や、大容量なのを活かし、下書き保存などに使えると思います。
また、Storage変更時に、eventが発火するので、タブ間の同期などにも使えます。
sessionStorage
タブ毎にスコープが分かれているので、タブで行った作業結果の一時保存や、タブを閉じたあと必要がない閲覧情報などの保存に使えると思います。
まとめ
HTML5で導入されたWebStorageについて、Cookieとの比較を行い説明しました。
また、使い方について、サンプルコードを元に説明を行いました。
サーバに送らなくてもいいデータなどの保存に使用すると、画面遷移の高速化が期待できます。
サーバとの無駄な通信量が多い時などいかがでしょうか?