Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IndexedDB: storing data locally on browsers with HTML5

IndexedDB: storing data locally on browsers with HTML5

storing data locally on browsers with the W3C standard IndexedDB

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

October 18, 2013
Tweet

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
  8. 08

  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
  22. 22

  23. 23

  24. 24

  25. 25

  26. 26

  27. 27

  28. 28

  29. None
  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