$30 off During Our Annual Pro Sale. View Details »

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

Tomomi Imura

October 18, 2013
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

  1. IndexedDB
    Storing data on browsers with HTML5
    http://photozou.jp/photo/show/1033469/126297401 by je5xkd bnd

    View Slide

  2. H E L L O
    M Y N A M E I S
    Tomomi
    @girlie_mac
    02

    View Slide

  3. Storing Data with HTML5
    • Cookie
    • DOM Storage
    • Local Storage
    • Session Storage
    • IndexedDB
    • WebSQL (Deprecated)
    03

    View Slide

  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

    View Slide

  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

    View Slide

  6. Local Storage
    • Persistent and scoped to the origin
    Session Storage
    • Non persistent - scoped only to the current window
    06

    View Slide

  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

    View Slide

  8. 08

    View Slide

  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

    View Slide

  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

    View Slide

  11. Browser Support
    Basic Async iDB Support
    11 15bl 4 10
    11

    View Slide

  12. Mobile Browser Support
    Basic Async iDB Support
    18 14wk 15bl 10 16 10
    12

    View Slide

  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

    View Slide

  14. Demo: Grocery List
    What do you need to buy? +
    Try the demo on: http://goo.gl/zLG83c
    14

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  21. Chrome DevTools
    You can inspect:
    • A List of Database
    • Properties of a DB
    • DB's Object stores
    21

    View Slide

  22. 22

    View Slide

  23. 23

    View Slide

  24. 24

    View Slide

  25. 25

    View Slide

  26. 26

    View Slide

  27. 27

    View Slide

  28. 28

    View Slide

  29. View Slide

  30. Try on mobile: http://goo.gl/MX7fe
    1:18
    30

    View Slide

  31. github.com/coremob/camera

    31

    View Slide

  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

    View Slide

  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

    View Slide

  34. So, can we use it now?
    34

    View Slide

  35. 35
    So, can we use it now?

    View Slide

  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

    View Slide

  37. Polyfill
    Prolly, you need to polyfill with Web SQL for now...
    • IndexedDB Shim by Parashuram "Axe" Narasimhan
    • IndexedDB-polyfill by Facebook
    37

    View Slide

  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

    View Slide

  39. Thank you!
    Tomomi Imura
    • girliemac.com
    • twitter.com/girlie_mac
    • github.com/girliemac
    39

    View Slide

  40. Mandatory Kitteh
    Taco cat spelt backwards is taco cat
    http://www.flickr.com/photos/ilovepaisley/6943837126/ by ilovepaisley bd
    40

    View Slide