HTML5の新機能紹介 ~WebStorage~

開発部の真崎です。

今回は、HTML5で導入された新機能の1つ、WebStorageについての紹介です。

WebStorageとは

WebStorageとは、HTML5で導入されたブラウザでデータの永続化を行う仕組みのことです。 特徴としては、 * 比較的大容量の文字列データを保存できる * Key-Value型のシンプルなインターフェイス * 保存/取得処理に通信を伴わない などがあります。 今までは、毎回サーバにアクセスし、保存/取得処理されていたブラウザ固有のデータをブラウザ内で完結させることができます。 また、最近使われている大多数のブラウザで使用できる(ChromeFireFoxSafariOpera、IE8~)ので、安心して使えます。

Cookieとの違い

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をサンプルとします。)

// sessionStorageが使えるかどうか
if (typeof sessionStorage === 'undefined')
    alert('sessionStorage is not found');

// 文字列データの操作は、hashを操作するように行えます。
sessionStorage['key'] = 'value';
console.log(sessionStorage['key']); // => 'value'
// 次の書き方もできます
//sessionStorage.setItem('key', 'value');
//console.log(sessionStorage.getItem('key'));
//sessionStorage.key = 'value';
//console.log(sessionStorage.key);

// Objectの保存には、JSON.stringifyなどで、シリアライズする必要があります。
sessionStorage['objKey'] = JSON.stringify({key: [1, 2, 3]});
// 取得時には、デシリアライズしてください。
console.log(JSON.parse(sessionStorage['objKey'])); // => {key: [1, 2, 3]}

// データを消したいとき、次のようにできます。
//sessionStorage.clear(); // 全件削除(Originに紐づく全件が削除されるので注意)
sessionStorage.removeItem('key'); // 'key'で登録されているデータが削除されます
// OriginでStorageが共有されているので、次のようにnamespaceを分けると削除しやすいです。
sessionStorage['prefix.key'] = 'value'; // 一意なprefixを付加
Object.keys(sessionStorage)  // -> ['objKey', 'prefix.key']
      .filter(function(k) { // prefixが一致するデータをfilter
          return k.split('.')[0] === 'prefix';
      }).each(function(k) { // filterされたデータを削除
          sessionStorage.removeItem(k);
      });

// その他のStorage interface
// n番目のkeyを戻します
sessionStorage.key(0); // -> 'objKey'
// Storageに保存されている件数(正確には、Storage自体のinterfaceではないですが)
sessionStorage.length; // -> 1
// 登録されているkeyの一覧
Object.keys(sessionStorage); // -> ['objKey']

// 他のタブからStorageの変更があった場合、eventが発火します
// (sessionStorageは仕様上、発火しないので、localStorageをサンプルにします)
localStorage['key'] = 'old';
// listenerを設定
window.addEventListener('storage', function(e) {
    console.log(e);
});
// 他のタブから
// localStorage['key'] = 'new';
// 登録、更新、削除など、Storageに変更があれば、eventが発火します
// => key: 'key', newValue: 'new', oldValue: 'old', ...

※Storageのデータは、Originで共有されるので、複数の機能で使用する場合、削除や上書きに気をつけてください。

使い分け

Cookie、localStorage、sessionStorageの違いを簡単に説明してきました。ここでは、それぞれの用途について考察してみたいと思います。

Cookie

容量が少なく、常にサーバとデータを共有しているCookieはログインセッションの管理が主な用途になると思います。

localStorage

ブラウザ毎にデータを永続的に保存できるので、設定の保存目的や、大容量なのを活かし、下書き保存などに使えると思います。 また、Storage変更時に、eventが発火するので、タブ間の同期などにも使えます。

sessionStorage

タブ毎にスコープが分かれているので、タブで行った作業結果の一時保存や、タブを閉じたあと必要がない閲覧情報などの保存に使えると思います。

まとめ

HTML5で導入されたWebStorageについて、Cookieとの比較を行い説明しました。 また、使い方について、サンプルコードを元に説明を行いました。 サーバに送らなくてもいいデータなどの保存に使用すると、画面遷移の高速化が期待できます。 サーバとの無駄な通信量が多い時などいかがでしょうか?