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