Client Side Cache

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

アジェンダ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

DOM Storage とは ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

sessionStorage ,[object Object],[object Object],[object Object]

Storage interface ,[object Object],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 ,[object Object],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 ,[object Object],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) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Storage event (2) ,[object Object],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) ,[object Object],[object Object],[object Object],[object Object]

Cookie vs DOM Storage (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cookie vs DOM Storage (3) ,[object Object],same host ( domain, path は設定してない状態 ) Window 1 Window 2 Window 3 Window 4 Window 5 localStorage / Cookie sessionStorage

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

Ex DOM Storage の中身の概略 ,[object Object],[object Object],[object Object],[object Object]

Behavior の基礎知識 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

userData Behavior (1) ,[object Object],[object Object],[object Object],element.addBehavior( "#default#userData" ); element.load( “my Storage ” ); // 読み込み element.setAttribute( “myData” , “blah blah” ); // 値の設定 element.save( “my Storage ” ); // 書き込み

userData Behavior (2) ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

HTML Component Behavior (1) ,[object Object],<?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) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML Component Behavior (3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML Component Behavior (4) ,[object Object],[object Object],[object Object],[object Object],[object Object]

Ex DOM Storage の HTC ファイル (1) ,[object Object],<!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) ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

onpropertychange イベント ,[object Object],[object Object],[object Object],[object Object]

Ex DOM Storage Known Issue ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

まとめ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Client Side Cache

Client Side Cache

Recommended

More Related Content

What's hot

What's hot(18)

Viewers also liked

Viewers also liked(7)

Similar to Client Side Cache

Similar to Client Side Cache(20)

More from Toru Yamaguchi

More from Toru Yamaguchi(18)

Recently uploaded

Recently uploaded(6)

Client Side Cache