client side cache

Yokohama Perl Mongers Tech Talk #3 2008-11-28

Introduction DOM Introduction DOM Storage and Inside Ex Storage and Inside Ex DOM Storage libraryDOM Storage library

Toru YamaguchiToru Yamaguchi

id:ZIGOROu <[email protected]>id:ZIGOROu <[email protected]>

アジェンダアジェンダ

DOM Storage DOM Storage ってなんだよ！ってなんだよ！ localStorage localStorage とと sessionStoragesessionStorage Cookie Cookie との違いとの違い

Inside Ex DOM Storage Inside Ex DOM Storage Behavior Behavior の基礎知識の基礎知識 userData Behavior userData Behavior HTML Component BehaviorHTML Component Behavior onpropertychange onpropertychange

Ex DOM Storage Ex DOM Storage のこれからのこれから

DOM Storage DOM Storage とはとは

DOM Storage DOM Storage とは何かとは何か DOM Storage DOM Storage とはとは JavaScript JavaScript から構造化されたデータから構造化されたデータ

をクライアントサイドに保存する技術でをクライアントサイドに保存する技術で HTML 5 HTML 5 で規で規定されている定されている http://www.whatwg.org/specs/web-apps/current-work/#structurhttp://www.whatwg.org/specs/web-apps/current-work/#structur

ed-client-side-storageed-client-side-storage

現時点では現時点では IE8, Fx2, Fx3, Safari 4 IE8, Fx2, Fx3, Safari 4 などで利用出来るなどで利用出来る DOM Storage DOM Storage には永続データ保存用のには永続データ保存用の localStoragelocalStorage とと

セッションデータ保存用のセッションデータ保存用の sessionStoragesessionStorage があるがある共に共に key-value key-value 形式でデータを形式でデータを String String として保存出来として保存出来

るる

localStoragelocalStorage

localStoragelocalStorage host host 単位単位で有効な永続的なクライアントサイドで有効な永続的なクライアントサイド

キャッシュですキャッシュです

if (localStorage.foo) { // 2 回目以降のアクセス console.log(localStorage.foo); } else { // 初回のアクセス localStorage.foo = “bar”; }

sessionStoragesessionStorage

sessionStoragesessionStorage host host 単位で有効で、ブラウザを閉じると消え単位で有効で、ブラウザを閉じると消え

ますますまたまた sessionStorage sessionStorage はは window window オブジェクトオブジェクト

ごとに割り当てられますごとに割り当てられます

Storage interfaceStorage interface

Storage interfaceStorage interfaceinterface 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 interfaceStorageEvent interface

Storage interfaceStorage interfaceinterface 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 interfaceStorage interface

Storage interfaceStorage interfaceinterface 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 (1)

Storage eventStorage event setItem(), removeItem() setItem(), removeItem() 相当の処理が実行された場合に相当の処理が実行された場合に

storage storage イベントが発生します。イベントが発生します。対象となった対象となった key key 及び、新旧の値が及び、新旧の値が event event オブジェクトにオブジェクトに

入ってます入ってます clear() clear() メソッドが実行された場合もメソッドが実行された場合も storage storage イベントイベント

が発生します。が発生します。 event.key, event.oldValue, event.newValue event.key, event.oldValue, event.newValue プロパティはプロパティは null null

になっているになっている localStorage localStorage の場合は、同一ホストで共有されるので、の場合は、同一ホストで共有されるので、

storage storage イベントは単独のイベントは単独の window window だけに通知されるのだけに通知されるのではなく、関係する全てのではなく、関係する全ての window window にに fire fire されます。されます。 event.source event.source プロパティにプロパティに localStorage localStorage への変更を行ったへの変更を行った wiwi

ndow ndow オブジェクトが入りますオブジェクトが入ります

Storage event (2)Storage event (2)

samplesample

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 vs DOM Storage (1)

有効期限有効期限Cookie Cookie はは expire expire を指定すれば任意の期間までを指定すれば任意の期間まで

指定でき、指定しない場合はブラウザを閉じる指定でき、指定しない場合はブラウザを閉じると消えると消える

localStorage localStorage は明示的に消さない限り永続的。は明示的に消さない限り永続的。 ssessionStorage essionStorage はブラウザを閉じると消える。はブラウザを閉じると消える。つまり指定時刻で消えるようなつまり指定時刻で消えるような Storage Storage を使いたを使いた

ければければ localStorage localStorage を何らかの方法で管理する必要を何らかの方法で管理する必要があるがある


容量容量 IE IE の場合、の場合、 Cookie Cookie はは 4096 byte 4096 byte までしか保存出来ず、までしか保存出来ず、

またまた key-value key-value のペアはのペアは 20 20 が上限。が上限。 IE IE の場合、の場合、 DOM Storage DOM Storage にはには 10MB 10MB ほど保存できるほど保存できる

APIAPI Cookie Cookie はは document.cookie document.cookie プロパティを用いるがプロパティを用いるが getget

ter/setter ter/setter の挙動が極めてキモイの挙動が極めてキモイ DOM Storage DOM Storage は通常のは通常の Object Object をハッシュのように扱をハッシュのように扱

うのと同じようにうのと同じように (( つまりプロパティ代入がつまりプロパティ代入が )) 使えるし、使えるし、またきちんとメソッドまたきちんとメソッド (getItem, setItem, removeItem, cl(getItem, setItem, removeItem, clear) ear) 経由でも操作出来る経由でも操作出来る


図解で分かる図解で分かる Cookie vs DOM Storage Cookie vs DOM Storage の共有の共有

same host ( domain, path は設定してない状態 )

Window 1 Window 2 Window 3 Window 4 Window 5

localStorage / Cookie

sessionStorage

IE6, 7 IE6, 7 で使えない？で使えない？ Ex DOM Storage Ex DOM Storage で出来るよで出来るよ

Ex DOM StorageEx DOM Storage IE6, IE7 IE6, IE7 で使えるで使える DOM Storage DOM Storage ライブラリライブラリ拙作です拙作です http://coderepos.org/share/wiki/ExDOMStoragehttp://coderepos.org/share/wiki/ExDOMStorage

今日のメインの話今日のメインの話 Inside Ex DOM StorageInside Ex DOM Storage 問題点と今後について問題点と今後について

Ex DOM Storage Ex DOM Storage の中身の概略の中身の概略

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

Behavior Behavior の基礎知識の基礎知識

Behavior Behavior とは何かとは何か後から任意の要素にプロパティ、メソッド、イベント後から任意の要素にプロパティ、メソッド、イベントやイベントハンドラを追加できる枠組みをやイベントハンドラを追加できる枠組みを DHTML BehaDHTML Behavior vior と言うと言う

既に幾つかの既に幾つかの Behavior Library Behavior Library が組み込まれているが組み込まれている #default#userData#default#userData

#default#VML#default#VML

カスタムのカスタムの Behavior Behavior をを HTML Component HTML Component と言うと言う Mozilla Mozilla のの XBL (XML Binding Language) XBL (XML Binding Language) はは HTC HTC のパクリのパクリ

userData Behavior (1) userData Behavior (1)

userData Behavior userData Behavior とはとは IE IE にデフォルトで付いてくるにデフォルトで付いてくる Behavior Behavior ライブライブ

ラリの一つラリの一つもろにクライアントサイドストレージ、使いもろにクライアントサイドストレージ、使い

方も超簡単方も超簡単

element.addBehavior("#default#userData"); element.load(“myStorage”); // 読み込みelement.setAttribute(“myData”, “blah blah”); // 値の設定 element.save(“myStorage”); // 書き込み

userData Behavior (2)userData Behavior (2)

userData Behavior userData Behavior の有効範囲の有効範囲 host host 単位で保存されるので単位で保存されるので DOM Storage DOM Storage と同と同

じ。じ。

key-value key-value の設定の設定最初は最初は attribute attribute としてとして key key を表現しようとを表現しようと思ったのだが、思ったのだが、 userData Behavior userData Behavior を適用したを適用した element element の場合、の場合、 attribute attribute の列挙が上手く行かの列挙が上手く行かないない ((仕様っぽぃ仕様っぽぃ )) JSON JSON で突っ込む事に。で突っ込む事に。

userData Behavior (3)userData Behavior (3)

Lock 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) HTML Component Behavior (1)

HTC 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=“/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 Component Behavior (2)

HTC HTC の利点の利点要素の挙動を比較的自由に決める事が出来る要素の挙動を比較的自由に決める事が出来る

指定した指定した width width を少なくとも確保するような挙動を少なくとも確保するような挙動とかとか (c.f. min-width)(c.f. min-width)

任意のメソッドを生やしたり任意のメソッドを生やしたり

あるいはあるいは property property に対するに対する getter/setter getter/setter を特定のを特定の JavaScript JavaScript メソッドに割り当てたりメソッドに割り当てたり

– IE IE はは defineGetter, defineSetter defineGetter, defineSetter が存在しないが存在しない– readonly readonly のプロパティが作れ、さらに計算結果などを返せのプロパティが作れ、さらに計算結果などを返せ

るる– length length プロパティとかに使えるプロパティとかに使える

HTML Component Behavior (3)HTML Component Behavior (3)

HTCHTC の配信時の注意の配信時の注意 HTC HTC はは text/x-component text/x-component で配信で配信

AddType text/x-component .htcAddType text/x-component .htc

HTC HTC のロードのロード - 3- 3種類種類 PIPI命令として命令として

<?import namespace=“svg” implementation=“svg.htc”<?import namespace=“svg” implementation=“svg.htc” ?> ?>

element.addBehavior(“foo.htc”)element.addBehavior(“foo.htc”) CSS CSS としてとして

div.foo { behavior: url(“foo.htc”); }div.foo { behavior: url(“foo.htc”); }

HTML Component Behavior (4)HTML Component Behavior (4)

localStorage, sessionStorage localStorage, sessionStorage オブジェクトオブジェクトの表現の表現実は実は script script 要素を二つ要素を二つ document.createElemedocument.createEleme

nt() nt() で作成して、で作成して、 head head 要素内に要素内に appendChild() appendChild() して、このして、この script script 要素に要素に HTC HTC をを element.addelement.addBehavior() Behavior() している。している。

理由は二つ理由は二つ property property へのへの getter/setter getter/setter を使いたいからを使いたいから

onpropertychange onpropertychange をを localStorage.foo = “blah” localStorage.foo = “blah” のよのような代入文の検出に使いたいからうな代入文の検出に使いたいから

Ex DOM Storage Ex DOM Storage のの HTC HTC ファイルファイル (1)(1)

Ex DOM Storage Ex DOM Storage のの HTCHTC

<!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="../src/json2.js"></script> <script type="text/javascript" src="../src/exdomstorage_impl.js"></script></public:component>

Ex DOM Storage Ex DOM Storage のの HTC HTC ファイルファイル (2)(2)

ちなみに冒頭にあったちなみに冒頭にあった DOCTYPE DOCTYPE 宣言宣言 document.compatMode document.compatMode がが HTC HTC にも存在するにも存在する DOCTYPE DOCTYPE 宣言や宣言や xml xml 宣言に影響される宣言に影響される CSS1Compat CSS1Compat じゃないと互換モードなので、じゃないと互換モードなので、 DD

OM OM 操作に色々支障が出る操作に色々支障が出るなのでなので HTC HTC はは XML XML 形式ですが形式ですが HTML HTML としとし

てて DOCTYPE DOCTYPE 宣言を入れると吉宣言を入れると吉

Ex DOM Storage Ex DOM Storage のの HTC HTC 実装部実装部

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

onpropertychange onpropertychange イベントイベント

onpropertychange onpropertychange イベントイベントelement element オブジェクトのプロパティに対する変オブジェクトのプロパティに対する変

更が行われた際に発火更が行われた際に発火 (fire) (fire) しますしますStorage Storage オブジェクトをオブジェクトを script script 要素に対して要素に対して aa

ddBehavior() ddBehavior() したオブジェクトで表現しているしたオブジェクトで表現しているので、ので、 onpropertychange onpropertychange イベントでイベントで storage.fostorage.foo = “blah” o = “blah” のような代入をイベントハンドラでのような代入をイベントハンドラで捕捉できる捕捉できるこれをもってこれをもって storage storage への反映、さらにへの反映、さらに storage storage

イベントの発火を行うことが出来るイベントの発火を行うことが出来る

Ex DOM Storage Known IssueEx DOM Storage Known Issue

storage storage イベントが同一イベントが同一 host host なな window window 全てに全てに対して通知出来ていない対して通知出来ていない異なる異なる window window 間での通信はどうやる？間での通信はどうやる？document.cookie document.cookie なら設定したら即座に共有されるなら設定したら即座に共有される

setInterval setInterval で監視するで監視する

sessionStorage sessionStorage がが window window ごとにユニークになっごとにユニークになっていないていないwindow.name window.name ならなら window window ごとにユニークで、遷移しごとにユニークで、遷移し

ても値を保持し続けるても値を保持し続けるここにここに uuid uuid でも突っ込んで、それをキーにしてでも突っ込んで、それをキーにして userDuserD

ata ata に書き込むに書き込む

まとめまとめ

DOM Storage DOM Storage はもうすぐクロスブラウザな技術はもうすぐクロスブラウザな技術 IE8, Fx2, Fx3, Safari 4 IE8, Fx2, Fx3, Safari 4 で既に使える技術で既に使える技術 Ex DOM Storage Ex DOM Storage が完成度高くなるとが完成度高くなると IE6+ IE6+ になるになる OperaOpera たん。。。。。たん。。。。。

Known Issue Known Issue な部分はまだ未実装な部分はまだ未実装 coderepos coderepos にソースあるんで、興味ある人はコミットにソースあるんで、興味ある人はコミット

してホスィなと。してホスィなと。

HTML Component HTML Component 面白いよ面白いよちょっとやればすぐに分かるので、ちょっとやればすぐに分かるので、 IE IE でで CSS CSS の挙動の挙動

がプギャーとかあったら書いてみるのといいかもがプギャーとかあったら書いてみるのといいかも Pathtraq Pathtraq でも一部使ってるｗでも一部使ってるｗ (XBL (XBL もも ))

client side cache

Technology