1. HTML5 Data Storage
allanhuang@eSobi.com

2. Agenda
 Data


Cookie
Web Storage



Storage
Session Storage
Local Storage
Database Storage


Web SQL Database
Indexed Database

3. Data Storage

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

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

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

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

8. Web Storage API

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

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

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

12. Web SQL Database

13. Opening the Database

14. Creating a Table

15. Adding data to a table

16. Querying the data in a table

17. Deleting data from a table

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

19. Indexed Database

20. Opening the database

21. Creating an Object Store

22. Adding data to a store

23. Querying the data in a store

24. Deleting data from a store

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

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

27. Security Check

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

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

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