IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Safari4 と IE8 で実装された DOM Storage とは何か

JavaScript IE WebKit

はじめに

皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。
さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。

DOM Storage とは何か

まず、 DOM Storage とはどんなものなのでしょうか。
とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。
さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。
では、この DOMStorage の具体的なソースコードを見てみましょう。

<!DOCTYPE html>
<html>
<head><title>DOMStorage の使い方</title></head>
<body><script>

// DOM Storage は localStorage というオブジェクトを経由してアクセスされます。
if (!localStorage.name) {

    // 使い方はただ代入するだけ
    localStorage.name = prompt('初めまして＞＜ 名前を教えてください')
}

// 簡単にデータを取り出せます
document.write(localStorage.name + 'さんこんにちは！');
</script></body>
</html>

たった 4 行です。
この HTML を DOM Storage に対応しているブラウザで見ると、最初の一回だけ名前を聞かれて以降は聞かれないという挙動をします。
サンプルはこちら
簡単ですね！

よく分からない＞＜

もう少し説明します。
当たり前のことですが、普通の JavaScript のオブジェクトってページ遷移すると値を失いますよね。

object.count = object.count || 0;
object.count++;
alert(object.count);

でも、 localStorage というオブジェクトのプロパティに値を代入しておくと、ページ遷移後でも値が保存されたままになるのです。

localStorage.count = localStorage.count || 0;
localStorage.count = parseInt(localStorage) + 1; // localStorage には文字列として保存されるので、 parseInt が必要
alert(localStorage.count);

それが DOM Storage です。

オブジェクトとかもぶち込めるの？

ぶち込めることはぶち込めるのですが、データはすべて文字列化されて保存されます。
つまり、"[object Object]" というような文字列が保存されたりします。

具体的にはどう嬉しいの？

今までの Web アプリケーションでは、クライアントデータの保存はほとんどサーバサイドで行われていました。
DOM Storage を使うと、ローカルのデータはローカルに保存するという当たり前のことが出来るようになります。
使われ方としては、

  • 設定や状態の保存
  • 大きなデータの一時的な保存
  • HTML ã‚„ JSON などのキャッシュ

メリットとしては

  • サーバ資源の節約
  • パフォーマンスの改善

などがあげられます。

どのブラウザで使えるの？

DOM Storage は以下のブラウザで使うことができます。

新しいブラウザでは、軒並み使えるようになる予定ですので、当然 Opera でも対応してくることになると思います。

新しい仕様と古い仕様

ただ一つ、注意する点は DOM Storage には古い仕様と新しい仕様があって、

  • 古い仕様を実装しているブラウザ
    • Firefox2
    • Firefox3
  • 新しい仕様を実装しているブラウザ

となっています。
一番最初に書いた例は、新しい仕様での書き方なので、実際には古い仕様でも動くように改造する必要があります。
改造と言っても単純で、

<!DOCTYPE html>
<html>
<head><title>DOM Storage の使い方</title></head>
<body><script>
// *** この 1 行を追加するだけ
window.localStorage = window.localStorage || window.globalStorage[location.hostname];
// *** この 1 行を追加するだけ

if (!localStorage.name) {
    localStorage.name = prompt('初めまして＞＜ 名前を教えてください')
}
document.write(localStorage.name + 'さんこんにちは！');
</script></body>
</html>

上の例のように 1 行を追加するだけです。

具体的に保存できる容量は？

容量は仕様には定義されていませんが、例えば IE8 では 10 MB の大容量を扱うことができます。
Safari4 や Firefox の容量を知っている人がいれば教えてください＞＜

仕様の全貌

この DOM Storage というものの仕様は HTML5 という仕様の一部で、Structured client-side storageという章で定義されています。

localStorage と sessionStorage

ここまで、 localStorage しか紹介してきませんでしたが、 DOM Storage には以下の二つのオブジェクトがあります。

  • localStorage
  • sessionStorage

localStorage はブラウザを落としても、データが残るオブジェクトで、 sessionStorage はそのタブ（ウィンドウ）が起動している間だけデータを保持します。

データの追加、書き換え

ここまでの例では、代入によるデータの追加方法だけを紹介していましたが、 setItem 関数によるデータの追加方法もあります。

localStorage.setItem('hoge', 'fuga'); // localStorage.hoge = 'fuga'; と同じ意味
sessionStorage.setItem('hoge', 'fuga'); // sessionStorage.hoge = 'fuga'; と同じ意味
データの参照

データの参照方法はプロパティとしての参照方法以外に、 getItem 関数による参照方法があります。

alert(localStorage.getItem('hoge')); // alert(localStorage.hoge); と同じ意味
alert(sessionStorage.getItem('hoge')); // alert(sessionStorage.hoge); と同じ意味
データの削除

データの削除方法は delete 演算子、または、 removeItem を使います。

delete localStorage.hoge;
localStorage.removeItem('hoge');
データの列挙

保存されたデータの列挙方法は、 length プロパティと　key 関数を使います。

for (var i = 0; i < localStorage.length; i ++) {
  var key = localStorage.key(i);
  var data = localStorage.getItem(key);
}

length プロパティは保存されたデータの個数を表し、 key 関数は数値を受け取りデータのプロパティ名（キー）を返します。

データが共有される範囲

データは同じ origin （プロトコル + ドメイン + ポート）で共有されます。
例えば、

storage イベント

DOM Storage は同じドメインなら複数のドキュメント間で共有できるのが便利ですが、別のページから突如書き換えられてしまう可能性があります。
そのような場合を細かく制御するために、 storage イベントというものが存在します。
使い方は、以下のようになります。

document.onstorage = function(e) {
  e = e || envet; // for IE

  if (e.window != window) { 
    alert(
      '別のドキュメントによって' +
      e.key + 'が' +
      e.oldValue + 'から' +
      e.newValue + 'に書き換えられました！');
  }
};

上の例のようにイベントオブジェクト e の

  • e.window には、書き換えたドキュメントの window オブジェクトが、
  • e.key には、追加したデータのプロパティ名（キー）が、
  • e.oldValue には、書き換えられる前のデータが、
  • e.newValue には、書き換えられた後のデータが、

入っています。

でも IE6, IE7 ユーザーが・・・そんなあなたに

「一番ユーザが多いブラウザ（IE6 と IE7）で使えないんじゃ、いくら便利なものとは言え使えないよ＞＜」というのはもっともだと思います。
でも、そこで諦める必要はありません。 IE 独自の機能を使って、IE6, IE7 でも DOM Storage が使えるようになってしまう夢のようなライブラリ「Ex DOM Storage」が今日リリースされました。
これで、思う存分 DOM Storage を使い倒すことができます。素晴らしい！

簡単な使い方

以下のように、 script タグを読み込んでやるだけです！簡単！

<html><head>
  <title>hoge</title>
  <script src="http://svn.coderepos.org/share/lang/javascript/exdomstorage/trunk/src/exdomstorage.js"></script>
</head>
<body>...</body>
</html>

ただし、自分のサーバーに置くときは、この js ファイル以外にも以下のリンク先にあるファイルをすべて置いて、適切な mime-type を設定しなければなりません。
http://svn.coderepos.org/share/lang/javascript/exdomstorage/trunk/src/

さらに詳細な情報は

作者様のページをどうぞ

まとめ

  • IE8 ã‚„ Safari4 からは、 DOM Storage が使えるようになる。
  • Firefox では古い仕様だが、簡単に新しい仕様と同じように使うことができる。
  • IE6 ã‚„ IE7 で DOM Storage を使えるようにするためのライブラリがリリースされた。

という訳で、 DOM Storage は未来の技術から、現在使える技術へと姿を変えました。皆様も DOM Storage を使って、クライアントサイドのパワーをフルにいかした Web アプリケーションを作ってみてはいかがでしょうか。