Cookies • name/value pair • 4k limit per cookie • Sent with the HTTP header • Old-School but cross-browser http://www.flickr.com/photos/melissacorey/4210541084/ by Melissa Corey bna 04
WebSQL Deprecated by W3C • Relational DB on client - SQLite syntax • Converting JS obj into relational schema is PITA • Still supported on Safari, Chrome, Opera, and Blackberry browsers 07
IndexedDB • W3C Standard (w3.org/TR/IndexedDB) • NoSQL • fast indexing and searching of objects • JS objects & keys ( o b j e c t S t o r e) • synchronous & asynchronous API 09
Quota Management API n a v i g a t o r . t e m p o r a r y S t o r a g e . q u e r y U s a g e A n d Q u o t a ( f u n c t i o n ( u s a g e , q u o t a ) { . . . } , f u n c t i o n ( e r r o r ) { . . . } ) ; * webkitTemporaryStorage w3.org/TR/quota-api 10
Feature Detection v a r i n d e x e d D B = w i n d o w . i n d e x e d D B | | w i n d o w . w e b k i t I n d e x e d D B | | w i n d o w . m o z I n d e x e d D B ; i f ( i n d e x e d D B ) { / / Y a y , i D B i s s u p p o r t e d ! } • Chrome < 23 & Blackberry require the w e b k i t prefix. • Firefox < 16 requires the m o z prefix. • Pre-released ver IE10 requires m s, but not production IE10+. 13
Opening a DB i f ( i n d e x e d D B ) { v a r r e q = i n d e x e d D B . o p e n ( ' m y D a t a b a s e ' ) ; / / a s y n c c a l l b a c k s r e q . o n s u c c e s s = f u n c t i o n ( e ) { . . . } ; . . . } 16
Latest spec (FF, IE10, Chrome >= 23) . . . r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / r e t r i e v e d a t a f r o m D B } ; r e q . o n e r r o r = f u n c t i o n ( e ) { c o n s o l e . l o g ( e ) ; } ; r e q . o n u p g r a d e n e e d e d = f u n c t i o n ( e ) { e . t a r g e t . r e s u l t . c r e a t e O b j e c t S t o r e ( ' s h o p ' , { k e y P a t h : ' i d ' , a u t o I n c r e m e n t : t r u e } ) ; } ; 17
Retrieve All Data v a r t x = d b . t r a n s a c t i o n ( ' s h o p ' , ' r e a d o n l y ' ) ; v a r o b j S t o r e = t x . o b j e c t S t o r e ( ' s h o p ' ) ; v a r c u r s o r R e q = o b j S t o r e . o p e n C u r s o r ( ) ; v a r a r r = [ ] ; c u r s o r R e q . o n s u c c e s s = f u n c t i o n ( e ) { v a r c u r s o r = e . t a r g e t . r e s u l t ; i f ( c u r s o r ) { a r r . p u s h ( c u r s o r . v a l u e ) ; c u r s o r . c o n t i n u e ( ) ; } e l s e { / / D i s p l a y t h e d a t a i n D O M } } 18
Add Data v a r i n p u t = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' i n p u t ' ) [ 0 ] ; v a r d a t a = { i t e m : i n p u t . v a l u e , c r e a t e d : n e w D a t e ( ) } ; v a r t x = d b . t r a n s a c t i o n ( ' s h o p ' , ' r e a d w r i t e ' ) ; v a r o b j S t o r e = t x . o b j e c t S t o r e ( ' s h o p ' ) ; v a r r e q = o b j S t o r e . p u t ( d a t a ) ; r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / D i s p l a y t h e d a t a } ; 19
Delete Data v a r t x = d b . t r a n s a c t i o n ( ' s h o p ' , ' r e a d w r i t e ' ) ; v a r o b j S t o r e = t x . o b j e c t S t o r e ( ' s h o p ' ) ; v a r r e q = o b j S t o r e . d e l e t e ( k e y ) ; r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / D i s p l a y t h e r e m a i n i n g d a t a } ; 20
Storing Blob e.g. Convert a canvas data to blob, then store it in iDB c a n v a s . t o B l o b ( f u n c t i o n ( b l o b ) { d a t a = { n a m e : ' c a t ' , p h o t o : b l o b } ; v a r t x = d b . t r a n s a c t i o n ( ' g a l l e r y ' , ' r e a d w r i t e ' ) ; v a r o b j S t o r e = t x . o b j e c t S t o r e ( ' g a l l e r y ' ) ; v a r r e q = o b j S t o r e . p u t ( d a t a ) ; . . . } , ' i m a g e / j p e g ' ) ; 32
Blob URLs Displaying Blob < i m g s r c = " b l o b : 9 5 8 c 1 b 5 0 - 0 9 a 0 - 2 5 4 3 - 8 5 2 8 - 8 6 9 7 a e 3 8 7 6 6 7 " > v a r U R L = w i n d o w . U R L | | w i n d o w . w e b k i t U R L * ; v a r i m g U R L = U R L . c r e a t e O b j e c t U R L ( b l o b ) ; 33
Meh: Spotty Browser Support • Safari and Opera (presto) do not support at all • Deprecated specs: Chrome <24, Firefox <13, & BB 10 • s e t V e r s i o n ( ) vs. o n u p g r a d e n e e d e d • I D B T r a n s a c t i o n . R E A D _ W R I T E vs. " r e a d w r i t e " • Chrome uses string for version • Chrome & Opera (blink) does not support b l o b 36
Indexed DB Web SQL Chrome 31 Yes Yes Opera 17 Yes Yes Blackberry 10 Yes Yes Firefox 25 Yes No IE 11 Yes No Safari 7 No Yes Android 4.2 No Yes } caniuse.com 38