狠狠撸

Introduction DOM Storage and Inside Ex DOM Storage library Toru Yamaguchi id:ZIGOROu <zigorou@cpan.org>

アジェンダ DOM Storage ってなんだよ！ localStorage と sessionStorage Cookie との違い Inside Ex DOM Storage Behavior の基礎知識 userData Behavior HTML Component Behavior onpropertychange Ex DOM Storage のこれから

DOM Storage とは DOM Storage とは何か DOM Storage とは JavaScript から構造化されたデータをクライアントサイドに保存する技術で HTML 5 で規定されている http://www.whatwg.org/specs/web-apps/current-work/#structured-client-side-storage 現時点では IE8, Fx2, Fx3, Safari 4 などで利用出来る DOM Storage には永続データ保存用の localStorage とセッションデータ保存用の sessionStorage がある共に key-value 形式でデータを String として保存出来る

localStorage localStorage host 単位で有効な永続的なクライアントサイドキャッシュです if (localStorage.foo) { // 2 回目以降のアクセス console.log(localStorage.foo); } else { // 初回のアクセス localStorage.foo = “bar”; }

sessionStorage sessionStorage host 単位で有効で、ブラウザを閉じると消えますまた sessionStorage は window オブジェクトごとに割り当てられます

Storage interface Storage interface interface Storage { readonly attribute unsigned long length ; [IndexGetter] DOMString key (in unsigned long index); [NameGetter] DOMString getItem (in DOMString key); [NameSetter] void setItem (in DOMString key, in DOMString data); [XXX] void removeItem (in DOMString key); void clear (); };

StorageEvent interface Storage interface interface Storage { readonly attribute unsigned long length ; [IndexGetter] DOMString key (in unsigned long index); [NameGetter] DOMString getItem (in DOMString key); [NameSetter] void setItem (in DOMString key, in DOMString data); [XXX] void removeItem (in DOMString key); void clear (); };

Storage interface Storage interface interface StorageEvent : Event { readonly attribute DOMString key ; readonly attribute DOMString oldValue ; readonly attribute DOMString newValue; readonly attribute DOMString url ; readonly attribute Window source ; void initStorageEvent ( in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in Window sourceArg); void initStorageEventNS ( in DOMString namespaceURI, in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in DOMString keyArg, in DOMString oldValueArg, in DOMString newValueArg, in DOMString urlArg, in Window sourceArg); };

Storage event (1) Storage event setItem(), removeItem() 相当の処理が実行された場合に storage イベントが発生します。対象となった key 及び、新旧の値が event オブジェクトに入ってます clear() メソッドが実行された場合も storage イベントが発生します。 event.key, event.oldValue, event.newValue プロパティは null になっている localStorage の場合は、同一ホストで共有されるので、 storage イベントは単独の window だけに通知されるのではなく、関係する全ての window に fire されます。 event.source プロパティに localStorage への変更を行った window オブジェクトが入ります

Storage event (2) sample var l = function (evt) { console.log(“key: ” + evt.key); console.log(“oldValue: ” + evt.oldValue); console.log(“newValue: “ + evt.newValue); } ; window .addEventListener( "storage" , l, false );

Cookie vs DOM Storage (1) 有効期限 Cookie は expire を指定すれば任意の期間まで指定でき、指定しない場合はブラウザを閉じると消える localStorage は明示的に消さない限り永続的。 sessionStorage はブラウザを閉じると消える。つまり指定時刻で消えるような Storage を使いたければ localStorage を何らかの方法で管理する必要がある

Cookie vs DOM Storage (2) 容量 IE の場合、 Cookie は 4096 byte までしか保存出来ず、また key-value のペアは 20 が上限。 IE の場合、 DOM Storage には 10MB ほど保存できる API Cookie は document.cookie プロパティを用いるが getter/setter の挙動が極めてキモイ DOM Storage は通常の Object をハッシュのように扱うのと同じように ( つまりプロパティ代入が ) 使えるし、またきちんとメソッド (getItem, setItem, removeItem, clear) 経由でも操作出来る

Cookie vs DOM Storage (3) 図解で分かる Cookie vs DOM Storage の共有 same host ( domain, path は設定してない状態 ) Window 1 Window 2 Window 3 Window 4 Window 5 localStorage / Cookie sessionStorage

IE6, 7 で使えない？Ex DOM Storage で出来るよ Ex DOM Storage IE6, IE7 で使える DOM Storage ライブラリ拙作です http://coderepos.org/share/wiki/ExDOMStorage 今日のメインの話 Inside Ex DOM Storage 問題点と今後について

Ex DOM Storage の中身の概略 Ex DOM Storage で利用しているニッチ技術の概要 userData Behavior HTML Component Behavior onpropertychange による代入検出

Behavior の基礎知識 Behavior とは何か後から任意の要素にプロパティ、メソッド、イベントやイベントハンドラを追加できる枠組みを DHTML Behavior と言う既に幾つかの Behavior Library が組み込まれている #default#userData #default#VML カスタムの Behavior を HTML Component と言う Mozilla の XBL (XML Binding Language) は HTC のパクリ

userData Behavior (1) userData Behavior とは IE にデフォルトで付いてくる Behavior ライブラリの一つもろにクライアントサイドストレージ、使い方も超簡単 element.addBehavior( "#default#userData" ); element.load( “my Storage ” ); // 読み込み element.setAttribute( “myData” , “blah blah” ); // 値の設定 element.save( “my Storage ” ); // 書き込み

userData Behavior (2) userData Behavior の有効範囲 host 単位で保存されるので DOM Storage と同じ。 key-value の設定最初は attribute として key を表現しようと思ったのだが、 userData Behavior を適用した element の場合、 attribute の列挙が上手く行かない ( 仕様っぽぃ ) JSON で突っ込む事に。

userData Behavior (3) Lock 出来ない Window (1) Window (2) load(skey) setAttribute(key, value) save(skey) load(skey) この時点で、 value には JSON データが入る。 { foo: “blah” } とかそういう値。 Window (1) の load() 前のデータが取れてしまう。以下略＞＜

HTML Component Behavior (1) HTC のサンプル <?xml version="1.0" encoding="utf-8" standalone="yes"?> <public:component xmlns="http://www.w3.org/1999/xhtml" xmlns:public="urn:HTMLComponent"> <script type="text/javascript“ src=/slideshow/client-side-cache-presentation/826166/“/path/to/src.jp”></script> <public:attach event="oncontentready" onevent="handlers.contentready(event);“ for="element" /> <public:attach event="onresize“ onevent="handlers.resize(event);“ for="window" /> </public:component>

HTC Component Behavior (2) HTC の利点要素の挙動を比較的自由に決める事が出来る指定した width を少なくとも確保するような挙動とか (c.f. min-width) 任意のメソッドを生やしたりあるいは property に対する getter/setter を特定の JavaScript メソッドに割り当てたり IE は defineGetter, defineSetter が存在しない readonly のプロパティが作れ、さらに計算結果などを返せる length プロパティとかに使える

HTML Component Behavior (3) HTC の配信時の注意 HTC は text/x-component で配信 AddType text/x-component .htc HTC のロード - 3 種類 PI 命令として <?import namespace=“svg” implementation=“svg.htc” ?> element.addBehavior(/slideshow/client-side-cache-presentation/826166/“foo.htc”) CSS として div.foo { behavior: url(/slideshow/client-side-cache-presentation/826166/“foo.htc”); }

HTML Component Behavior (4) localStorage, sessionStorage オブジェクトの表現実は script 要素を二つ document.createElement() で作成して、 head 要素内に appendChild() して、この script 要素に HTC を element.addBehavior() している。理由は二つ property への getter/setter を使いたいから onpropertychange を localStorage.foo = “blah” のような代入文の検出に使いたいから

Ex DOM Storage の HTC ファイル (1) Ex DOM Storage の HTC <!DOCTYPE html> <public:component xmlns="http://www.w3.org/1999/xhtml“ xmlns:public="urn:HTMLComponent"> <public:property name="length" get="getLength" /> <public:property name="remainingSpace" get="getRemainingSpace" /> <public:method name="clear" /> <public:method name="getItem" /> <public:method name="key" /> <public:method name="removeItem" /> <public:method name="setItem" /> <public:attach event="onreadystatechange" for="element" onevent="initialize();" /> <public:attach event="onpropertychange" for="element" onevent="syncronize(window.event);" /> <script type="text/javascript" src=/slideshow/client-side-cache-presentation/826166/"../src/json2.js"></script> <script type="text/javascript" src="../src/exdomstorage_impl.js"></script> </public:component>

Ex DOM Storage の HTC ファイル (2) ちなみに冒頭にあった DOCTYPE 宣言 document.compatMode が HTC にも存在する DOCTYPE 宣言や xml 宣言に影響される CSS1Compat じゃないと互換モードなので、 DOM 操作に色々支障が出るなので HTC は XML 形式ですが HTML として DOCTYPE 宣言を入れると吉

Ex DOM Storage の HTC 実装部実装部 /* * Implementation Storage Interface * storage.length と言うアクセスの際に * 必ず getLength() が呼ばれる */ function getLength() { var length = 0; for (var p in storage) length++; return length; }

onpropertychange イベント onpropertychange イベント element オブジェクトのプロパティに対する変更が行われた際に発火 (fire) します Storage オブジェクトを script 要素に対して addBehavior() したオブジェクトで表現しているので、 onpropertychange イベントで storage.foo = “blah” のような代入をイベントハンドラで捕捉できるこれをもって storage への反映、さらに storage イベントの発火を行うことが出来る

Ex DOM Storage Known Issue storage イベントが同一 host な window 全てに対して通知出来ていない異なる window 間での通信はどうやる？ document.cookie なら設定したら即座に共有される setInterval で監視する sessionStorage が window ごとにユニークになっていない window.name なら window ごとにユニークで、遷移しても値を保持し続けるここに uuid でも突っ込んで、それをキーにして userData に書き込む

まとめ DOM Storage はもうすぐクロスブラウザな技術 IE8, Fx2, Fx3, Safari 4 で既に使える技術 Ex DOM Storage が完成度高くなると IE6+ になる Opera たん。。。。。 Known Issue な部分はまだ未実装 coderepos にソースあるんで、興味ある人はコミットしてホスィなと。 HTML Component 面白いよちょっとやればすぐに分かるので、 IE で CSS の挙動がプギャーとかあったら書いてみるのといいかも Pathtraq でも一部使ってるｗ (XBL も )

狠狠撸

Client Side Cache

More Related Content

Client Side Cache