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

    H E L L O M Y N A M

    E I S Tomomi @girlie_mac 02
  2. 3.

    Storing Data with HTML5 • Cookie • DOM Storage •

    Local Storage • Session Storage • IndexedDB • WebSQL (Deprecated) 03
  3. 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
  4. 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
  5. 6.

    Local Storage • Persistent and scoped to the origin Session

    Storage • Non persistent - scoped only to the current window 06
  6. 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
  7. 8.

    08

  8. 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
  9. 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
  10. 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
  11. 14.

    Demo: Grocery List What do you need to buy? +

    Try the demo on: http://goo.gl/zLG83c 14
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 21.

    Chrome DevTools You can inspect: • A List of Database

    • Properties of a DB • DB's Object stores 21
  19. 22.

    22

  20. 23.

    23

  21. 24.

    24

  22. 25.

    25

  23. 26.

    26

  24. 27.

    27

  25. 28.

    28

  26. 29.
  27. 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
  28. 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
  29. 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
  30. 37.

    Polyfill Prolly, you need to polyfill with Web SQL for

    now... • IndexedDB Shim by Parashuram "Axe" Narasimhan • IndexedDB-polyfill by Facebook 37
  31. 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