Your SlideShare is downloading. ×
Client Side Cache
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Client Side Cache

2,622
views

Published on

IE6+ で使える DOM Storage の話。 …

IE6+ で使える DOM Storage の話。
Yokohama.pm #3 での発表資料

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,622
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction DOM Storage and Inside Ex DOM Storage library Toru Yamaguchi id:ZIGOROu <zigorou@cpan.org>
  • 2. アジェンダ
    • DOM Storage ってなんだよ!
      • localStorage と sessionStorage
      • Cookie との違い
    • Inside Ex DOM Storage
      • Behavior の基礎知識
      • userData Behavior
      • HTML Component Behavior
      • onpropertychange
    • Ex DOM Storage のこれから
  • 3. 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 として保存出来る
  • 4. localStorage
    • localStorage
      • host 単位 で有効な永続的なクライアントサイドキャッシュです
    if (localStorage.foo) { // 2 回目以降のアクセス console.log(localStorage.foo); } else { // 初回のアクセス localStorage.foo = “bar”; }
  • 5. sessionStorage
    • sessionStorage
      • host 単位で有効で、ブラウザを閉じると消えます
      • また sessionStorage は window オブジェクトごとに割り当てられます
  • 6. 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 (); };
  • 7. 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 (); };
  • 8. 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); };
  • 9. 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 オブジェクトが入ります
  • 10. 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( &quot;storage&quot; , l, false );
  • 11. Cookie vs DOM Storage (1)
    • 有効期限
      • Cookie は expire を指定すれば任意の期間まで指定でき、指定しない場合はブラウザを閉じると消える
      • localStorage は明示的に消さない限り永続的。 sessionStorage はブラウザを閉じると消える。
        • つまり指定時刻で消えるような Storage を使いたければ localStorage を何らかの方法で管理する必要がある
  • 12. 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) 経由でも操作出来る
  • 13. 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
  • 14. IE6, 7 で使えない?Ex DOM Storage で出来るよ
    • Ex DOM Storage
      • IE6, IE7 で使える DOM Storage ライブラリ
      • 拙作です
      • http://coderepos.org/share/wiki/ExDOMStorage
    • 今日のメインの話
      • Inside Ex DOM Storage
      • 問題点と今後について
  • 15. Ex DOM Storage の中身の概略
    • Ex DOM Storage で利用しているニッチ技術の概要
      • userData Behavior
      • HTML Component Behavior
      • onpropertychange による代入検出
  • 16. Behavior の基礎知識
    • Behavior とは何か
      • 後から任意の要素にプロパティ、メソッド、イベントやイベントハンドラを追加できる枠組みを DHTML Behavior と言う
      • 既に幾つかの Behavior Library が組み込まれている
        • #default#userData
        • #default#VML
      • カスタムの Behavior を HTML Component と言う
        • Mozilla の XBL (XML Binding Language) は HTC のパクリ
  • 17. userData Behavior (1)
    • userData Behavior とは
      • IE にデフォルトで付いてくる Behavior ライブラリの一つ
      • もろにクライアントサイドストレージ、使い方も超簡単
    element.addBehavior( &quot;#default#userData&quot; ); element.load( “my Storage ” ); // 読み込み element.setAttribute( “myData” , “blah blah” ); // 値の設定 element.save( “my Storage ” ); // 書き込み
  • 18. userData Behavior (2)
    • userData Behavior の有効範囲
      • host 単位で保存されるので DOM Storage と同じ。
    • key-value の設定
      • 最初は attribute として key を表現しようと思ったのだが、 userData Behavior を適用した element の場合、 attribute の列挙が上手く行かない ( 仕様っぽぃ )
        • JSON で突っ込む事に。
  • 19. userData Behavior (3)
    • Lock 出来ない
    Window (1) Window (2) load(skey) setAttribute(key, value) save(skey) load(skey) この時点で、 value には JSON データが入る。 { foo: “blah” } とかそういう値。 Window (1) の load() 前のデータが取れてしまう。以下略><
  • 20. HTML Component Behavior (1)
    • HTC のサンプル
    <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; standalone=&quot;yes&quot;?> <public:component xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:public=&quot;urn:HTMLComponent&quot;> <script type=&quot;text/javascript“ src=“/path/to/src.jp”></script> <public:attach event=&quot;oncontentready&quot; onevent=&quot;handlers.contentready(event);“ for=&quot;element&quot; /> <public:attach event=&quot;onresize“ onevent=&quot;handlers.resize(event);“ for=&quot;window&quot; /> </public:component>
  • 21. HTC Component Behavior (2)
    • HTC の利点
      • 要素の挙動を比較的自由に決める事が出来る
        • 指定した width を少なくとも確保するような挙動とか (c.f. min-width)
        • 任意のメソッドを生やしたり
        • あるいは property に対する getter/setter を特定の JavaScript メソッドに割り当てたり
          • IE は defineGetter, defineSetter が存在しない
          • readonly のプロパティが作れ、さらに計算結果などを返せる
          • length プロパティとかに使える
  • 22. 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(“foo.htc”)
      • CSS として
        • div.foo { behavior: url(“foo.htc”); }
  • 23. HTML Component Behavior (4)
    • localStorage, sessionStorage オブジェクトの表現
      • 実は script 要素を 二つ document.createElement() で作成して、 head 要素内に appendChild() して、この script 要素に HTC を element.addBehavior() している。
      • 理由は二つ
        • property への getter/setter を使いたいから
        • onpropertychange を localStorage.foo = “blah” のような代入文の検出に使いたいから
  • 24. Ex DOM Storage の HTC ファイル (1)
    • Ex DOM Storage の HTC
    <!DOCTYPE html> <public:component xmlns=&quot;http://www.w3.org/1999/xhtml“ xmlns:public=&quot;urn:HTMLComponent&quot;> <public:property name=&quot;length&quot; get=&quot;getLength&quot; /> <public:property name=&quot;remainingSpace&quot; get=&quot;getRemainingSpace&quot; /> <public:method name=&quot;clear&quot; /> <public:method name=&quot;getItem&quot; /> <public:method name=&quot;key&quot; /> <public:method name=&quot;removeItem&quot; /> <public:method name=&quot;setItem&quot; /> <public:attach event=&quot;onreadystatechange&quot; for=&quot;element&quot; onevent=&quot;initialize();&quot; /> <public:attach event=&quot;onpropertychange&quot; for=&quot;element&quot; onevent=&quot;syncronize(window.event);&quot; /> <script type=&quot;text/javascript&quot; src=&quot;../src/json2.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;../src/exdomstorage_impl.js&quot;></script> </public:component>
  • 25. Ex DOM Storage の HTC ファイル (2)
    • ちなみに冒頭にあった DOCTYPE 宣言
      • document.compatMode が HTC にも存在する
      • DOCTYPE 宣言や xml 宣言に影響される
      • CSS1Compat じゃないと互換モードなので、 DOM 操作に色々支障が出る
      • なので HTC は XML 形式ですが HTML として DOCTYPE 宣言を入れると吉
  • 26. Ex DOM Storage の HTC 実装部
    • 実装部
    /* * Implementation Storage Interface * storage.length と言うアクセスの際に * 必ず getLength() が呼ばれる */ function getLength() { var length = 0; for (var p in storage) length++; return length; }
  • 27. onpropertychange イベント
    • onpropertychange イベント
      • element オブジェクトのプロパティに対する変更が行われた際に発火 (fire) します
      • Storage オブジェクトを script 要素に対して addBehavior() したオブジェクトで表現しているので、 onpropertychange イベントで storage.foo = “blah” のような代入をイベントハンドラで捕捉できる
        • これをもって storage への反映、さらに storage イベントの発火を行うことが出来る
  • 28. Ex DOM Storage Known Issue
    • storage イベントが同一 host な window 全てに対して通知出来ていない
      • 異なる window 間での通信はどうやる?
      • document.cookie なら設定したら即座に共有される
        • setInterval で監視する
    • sessionStorage が window ごとにユニークになっていない
      • window.name なら window ごとにユニークで、遷移しても値を保持し続ける
      • ここに uuid でも突っ込んで、それをキーにして userData に書き込む
  • 29. まとめ
    • DOM Storage はもうすぐクロスブラウザな技術
      • IE8, Fx2, Fx3, Safari 4 で既に使える技術
      • Ex DOM Storage が完成度高くなると IE6+ になる
      • Opera たん。。。。。
    • Known Issue な部分はまだ未実装
      • coderepos にソースあるんで、興味ある人はコミットしてホスィなと。
    • HTML Component 面白いよ
      • ちょっとやればすぐに分かるので、 IE で CSS の挙動がプギャーとかあったら書いてみるのといいかも
      • Pathtraq でも一部使ってるw (XBL も )