Client Side Cache

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 を何らかの方法で管理する必要がある

容量

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 の共有

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 の有効範囲

host 単位で保存されるので DOM Storage と同じ。

key-value の設定

最初は attribute として key を表現しようと思ったのだが、 userData Behavior を適用した element の場合、 attribute の列挙が上手く行かない ( 仕様っぽぃ )

JSON で突っ込む事に。

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=“/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 プロパティとかに使える

HTC の配信時の注意

HTC は text/x-component で配信

AddType text/x-component .htc

HTC のロード - 3 種類

PI 命令として

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

element.addBehavior(“foo.htc”)

CSS として

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

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="../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 イベント