Overview of the 
HTML 5 client storage technologies


BY DENI SPASOVSKI

denimf @ twitter/github/gmail
16 April 2014 @ NYC HTML5 meetup

Client storage?

HTML 5 Client storage Technologies

  • Web Storage
  • Indexed DB 
  • File System API
  • Web SQL (deprecated)

Web storage

  • Key/Value store
  • Stores values as string
  • Access scoped to an HTML5 origin 
    • (scheme + hostname + non-standard port)
  • Not accessible from web workers

Two DIFFERENT types of Web Storage

  • session storage
    • temporary storage -  objects are available until the browser is closed
    • opening the same page in new window will create different session storage scope
  • local storage
    • persistent storage - data is stored until the user deletes history

Can I USE WEB STORAGE

Feature Chrome IE Firefox Opera Safari
localStorage 4 8 3.5 10.50 4
sessionStorage 5 8 2 10.50 4


Feature Android Browser Android Chrome IE Mobile iOS Safari
localStorage 2.1 18 10 3.2
sessionStorage 2.1 18 10 3.2

IndexEd db

  • It is a NOSQL database hosted inside the browser
  • Access scoped to an HTML5 origin
  • The IndexedDB API is mostly asynchronous
  • IndexedDB is built on a transactional database model
  • You need a 'request' for anything from IndexedDB
  • There is no free text search and index join
  • It's accessible from web workers in Chrome and IE

Indexed DB model

Indexed DB requesT

Can I use Indexed DB

Feature Chrome IE Firefox Opera Safari
Asynchronous API 11.0/24.0 10 4.0/16.0 17 n/a
Feature Android Browser Android Chrome IE Mobile iOS Safari
Asynchronous API 4.4 18 10 n/a

Performance test

  • Insert 2500 objects with one transaction
  • Object size ~1KB
  • Tests:
    • delete database
    • insert data with 4 parallel web workers
    • search without index
    • search with key index
    • search with range index
  • results are in milliseconds 

Performance hdd vs SSD

Mozila SSD FF Chrome SSD Chrome IE (80K)
total 111232 143799 68443 26567 96253
delete 36 84 11643 10113 28
init 69854 45379 50052 10497 63783
search 11679 39028 5079 5012 25615
key search 25836 49281 821 457 2904
range search 3827 10027 848 488 3923
results are in milliseconds

Performance vs data set IE

10K 80K 500K
total 12643 96253 n/a
delete 26 28 n/a
init 7617 63783 n/a
search 4069 25615 n/a
key search 415 2904 n/a
range search 516 3923 n/a
results are in milliseconds

PERFORMANCE VS DATA SET FF

10K 100K 500K
total 9736 143799 1205569
delete 66 84 201
init 4303 45379 274360
search 4012 39028 190964
key search 857 49281 680213
range search 498 10027 59831
results are in miliseconds

PERFORMANCE VS DATA SET Chrome

10K 100K 500K
total 3744 26567 184669
delete 755 10113 58325
init 1620 10497 48303
search 1170 5012 65101
key search 94 457 5978
range search 105 488 6962
results are in miliseconds

File SYstem API

  • File system like storage sand boxed in the browser
  • It supports folder structure
  • It's not yet a standard, it's supported only in Chrome
  • Access scoped to an HTML5 origin

File system API details

  • Two types of storage
    • Temporary - can be deleted by the browser
    • Permanent - can be deleted only by the user
  • You can start using the API by creating File System request
  • Permanent storage requires quota request prior to File System request

File system request

Can I use File System API

Feature Chrome IE Firefox Opera Safari
File Reader API 13 10 3.6 6.0 11.1
File Writer API 13 n/a n/a 15 n/a


Feature Android Browser Android Chrome IE Mobile iOS Safari
File Reader API 4.4 18 10 6.0
File Writer API n/a 18 n/a n/a

Web SQL

  • API to SQLite hosted inside the browser
  • It's no longer a standard
  • Still used in Phone GAP

CAN I USE WEB SQL


Don't!

RECOMMENDED Usage

  • Web Storage - simple data
  • Indexed DB - structured data (objects)
  • File System API - binary data (files)
  • Web SQL (deprecated) - don't use it!

Note From Author

Data on the client side can be lost at any time!

Questions


?

Demo


Resources

thank you!

OVERVIEW OF THE HTML 5 CLIENT STORAGE TECHNOLOGIES

BY DENI SPASOVSKI

denimf @ twitter/github/gmail