IndexedDB: storing data locally on browsers with HTML5

storing data locally on browsers with the W3C standard IndexedDB

Transcript

1. IndexedDB Storing data on browsers with HTML5 http://photozou.jp/photo/show/1033469/126297401 by je5xkd bnd
2. H E L L O M Y N A M E I S Tomomi @girlie_mac 02
3. Storing Data with HTML5 • Cookie • DOM Storage • Local Storage • Session Storage • IndexedDB • WebSQL (Deprecated) 03
4. 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
5. HTML5 DOM Storage • name/value pair • 2.5MB - 10MB per origin • Read in client - JavaScript • Not supported on IE6, 7, and Opera 10. 05
6. Local Storage • Persistent and scoped to the origin Session Storage • Non persistent - scoped only to the current window 06
7. 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
9. 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
10. 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
11. Browser Support Basic Async iDB Support 11 15bl 4 10 11
12. Mobile Browser Support Basic Async iDB Support 18 14wk 15bl 10 16 10 12
13. 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
14. Demo: Grocery List What do you need to buy? + Try the demo on: http://goo.gl/zLG83c 14
15. Creating A Simple Grocery List 1. Open an iDB 2. Retrieve data 3. Display the data User Interaction • Add an item • Delete an item 15
16. 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
17. 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
18. 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
19. 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
20. 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
21. Chrome DevTools You can inspect: • A List of Database • Properties of a DB • DB's Object stores 21
30. Try on mobile: http://goo.gl/MX7fe 1:18 30
31. github.com/coremob/camera  31
32. 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
33. 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
34. So, can we use it now? 34
35. 35 So, can we use it now?
36. 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
37. Polyfill Prolly, you need to polyfill with Web SQL for now... • IndexedDB Shim by Parashuram "Axe" Narasimhan • IndexedDB-polyfill by Facebook 37
38. 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
39. Thank you! Tomomi Imura • girliemac.com • twitter.com/girlie_mac • github.com/girliemac 39
40. Mandatory Kitteh Taco cat spelt backwards is taco cat http://www.flickr.com/photos/ilovepaisley/6943837126/ by ilovepaisley bd 40