原因
Firefox nightly がまだバグってて
alert(window.Function == Function); // false; alert(window.Function == function(){}.constructor); // false; alert(Function == function(){}.constructor); // true;
てな感じになる
対処
ページの先頭で
window.Function = Function;
とやれば動く
Firefox nightly がまだバグってて
alert(window.Function == Function); // false; alert(window.Function == function(){}.constructor); // false; alert(Function == function(){}.constructor); // true;
てな感じになる
ページの先頭で
window.Function = Function;
とやれば動く
皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。
さて今日は、今、ちまたで大ブレイクの兆しを見せている 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 を使うと、ローカルのデータはローカルに保存するという当たり前のことが出来るようになります。
使われ方としては、
メリットとしては
などがあげられます。
DOM Storage は以下のブラウザで使うことができます。
新しいブラウザでは、軒並み使えるようになる予定ですので、当然 Opera でも対応してくることになると思います。
ただ一つ、注意する点は DOM Storage には古い仕様と新しい仕様があって、
となっています。
一番最初に書いた例は、新しい仕様での書き方なので、実際には古い仕様でも動くように改造する必要があります。
改造と言っても単純で、
<!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 しか紹介してきませんでしたが、 DOM Storage には以下の二つのオブジェクトがあります。
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 (プロトコル + ドメイン + ポート)で共有されます。
例えば、
DOM Storage は同じドメインなら複数のドキュメント間で共有できるのが便利ですが、別のページから突如書き換えられてしまう可能性があります。
そのような場合を細かく制御するために、 storage イベントというものが存在します。
使い方は、以下のようになります。
document.onstorage = function(e) { e = e || envet; // for IE if (e.window != window) { alert( '別のドキュメントによって' + e.key + 'が' + e.oldValue + 'から' + e.newValue + 'に書き換えられました!'); } };
上の例のようにイベントオブジェクト e の
入っています。
「一番ユーザが多いブラウザ(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/
という訳で、 DOM Storage は未来の技術から、現在使える技術へと姿を変えました。皆様も DOM Storage を使って、クライアントサイドのパワーをフルにいかした Web アプリケーションを作ってみてはいかがでしょうか。