HTML5 Data Storage

HTML5 Data Storage
allanhuang@eSobi.com

Agenda
 Data



Cookie
Web Storage





Storage

Session Storage
Local Storage

Database Storage



Web SQL Database
Indexed Database

Cookie
 Disadvantages


Cookies are sent to the server with every HTTP
request






Slow down web application
Send data unencrypted over the Internet, except for
SSL

Cookies are limited to 4 KB per domain
Cookies are tied to the browser session, not
browser window / tab

Client-side Storage
 What



A lot of storage space…
On the client…




Increase accessibility

That persists beyond a page refresh…




we really want is…

More responsiveness

And is not transmitted to the server


Reduced load on server

Web Storage


Browser Support





Session Storage




Limit it to about 5 MB per domain
Already available in all major new browsers
Persist data for as long as that browser window / tab is
open

Local Storage



Persist data even the browser window / tab is closed in the
long-term
User agents may, if so configured by the user,
automatically delete stored data after a period of time

Web Storage API


Persist data storage of key-value pair data in Web
clients









long length;
string key(long position);
string getItem(string key);
void setItem(string key, string value);
void removeItem(string key);
void clear();

Store JSON object


JSON.parse, JSON.stringify

Web Storage Event
 Storage

event is fired when a storage area
changes


Onstorage

 StorageEvent






object properties

key : string
oldValue : string / null
newValue : string / null
url : string
storageArea : storage

Analysis


Advantages







Supported on all modern browsers
Simple API signature
Simple call flow, being a synchronous API
Semantic events available to keep other tabs/windows in
sync

Disadvantages




Poor performance on searching or storing large / complex
data
Unscalable, no query language, schemas
It not supports a transactional database model

Database Storage
 Limit

it to about 5 MB per domain
 Web SQL Database



An embedded SQL database - SQLite
Chrome, Safari, Opera, iOS (iPhone / iPad / Mac),
Android

 Indexed




Database

A simple flat-file database with hierarchical
key/value persistence and basic indexing
Chrome, Firefox, IE10

Analysis


Advantages







Fast and pretty feature-rich SQL implementation
Good performance generally, being an asynchronous API
It supports a transactional database model
Easier to maintain integrity of data

Disadvantages




Available in Chrome and webkit-based browsers (Safari,
etc.), but not Firefox or IE
W3C announced that It is deprecated
Steep learning curve, requiring knowledge of relational
databases and SQL

Analysis


Advantages







If you're a NoSQL type of person, then this might fit the bill
perfectly
Good performance generally, being an asynchronous API
It supports a transactional database model
Fairly easy learning curve, due to a simple data model

Disadvantages





Somewhat complex API
Need to ensure data consistency and integrity
Not yet available in most new browsers
If you wanted SQL, you're not getting it here

Security Issues
 If


the data is in the data storage…
Non-Security!




No credential verification because there is no server
request

Verify the current value that you read to or write
from the data storage every time


If there’s any difference, delete all of the values from
data storage

DB Storage Comparison
Category
Advantages

Disadvantages

Web SQL Database
A real, relational database
implementation on the client
(SQLite)
SQLite

•
•

•

The spec is deprecated
Overhead of SQL language
you need to master and
transform your JavaScript
objects into relational
schema
Not object-driven

Indexed Database
•Allows

fast indexing and searching of
objects, so in a web application scenario,
you can manage your data and read/write it
fast
•A NoSQL database that let you work with
your JavaScript objects and indexing them
based on your application needs
•Works in asynchronous mode with
moderately granular locking per transaction.
This allows you to work inside the eventdriven module of JavaScript
Harder to understand if you are coming
from the world of relational databases

DB Storage Comparison
Category

Web SQL Database

Indexed Database

Location

Tables contain columns and
rows

Object Store contains JavaScript objects and
keys

Query
Mechanism

SQL

Cursor APIs, Key Range APIs, and
Application Code

Transaction

Lock can happen on databases,
tables, or rows on
READ_WRITE transactions

Lock can happen on database
VERSION_CHANGE transaction, on an
objectStore READ_ONLY and READ_WRITE
transactions

Transaction
Commits

Transaction creation is explicit.
Default is to rollback unless we
call commit

Transaction creation is explicit. Default is to
commit unless we call abort or there is an
error that is not caught

Conclusion


Tips








If you're only deploying on Mobile platforms, then Web SQL
Database is a no-brainer
If you're deploying on Desktop platforms and can require IE
/ Firefox as your browser, then Indexed Database is for you
Don’t use Web Storage in any heavy-duty application at the
moment
Init-Time Branching




e.g. Browser sniffing

Q&A

HTML5 Data Storage

More Related Content

What's hot

Similar to HTML5 Data Storage

More from Allan Huang

Recently uploaded

HTML5 Data Storage