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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (7)

Similar a Client Side Cache

Similar a Client Side Cache (20)

Más de Toru Yamaguchi

Más de Toru Yamaguchi (18)

Último

Último (9)

Client Side Cache