0
HTML5 Data Storage
allanhuang@eSobi.com
Agenda
 Data



Cookie
Web Storage





Storage

Session Storage
Local Storage

Database Storage



Web SQL Databa...
Data Storage
Cookie
 Disadvantages


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




Slow down web application
Send ...
Client-side Storage
 What



A lot of storage space…
On the client…




Increase accessibility

That persists beyond ...
Web Storage


Browser Support





Session Storage




Limit it to about 5 MB per domain
Already available in all ma...
Web Storage API


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



long length;
string key(long...
Web Storage API
Web Storage Event
 Storage

event is fired when a storage area
changes


Onstorage

 StorageEvent






object pro...
Analysis


Advantages







Supported on all modern browsers
Simple API signature
Simple call flow, being a synchro...
Database Storage
 Limit

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

An embedded SQL database - SQLite
Chrome, Sa...
Web SQL Database
Opening the Database
Creating a Table
Adding data to a table
Querying the data in a table
Deleting data from a table
Analysis


Advantages







Fast and pretty feature-rich SQL implementation
Good performance generally, being an as...
Indexed Database
Opening the database
Creating an Object Store
Adding data to a store
Querying the data in a store
Deleting data from a store
Analysis


Advantages







If you're a NoSQL type of person, then this might fit the bill
perfectly
Good performan...
Security Issues
 If


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



No credential verification because there is n...
Security Check
DB Storage Comparison
Category
Advantages

Disadvantages

Web SQL Database
A real, relational database
implementation on t...
DB Storage Comparison
Category

Web SQL Database

Indexed Database

Location

Tables contain columns and
rows

Object Stor...
Conclusion


Tips








If you're only deploying on Mobile platforms, then Web SQL
Database is a no-brainer
If you'...
Upcoming SlideShare
Loading in...5
×

HTML5 Data Storage

131

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
131
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Data Storage"

  1. 1. HTML5 Data Storage allanhuang@eSobi.com
  2. 2. Agenda  Data   Cookie Web Storage    Storage Session Storage Local Storage Database Storage   Web SQL Database Indexed Database
  3. 3. Data Storage
  4. 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. 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. 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. 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. 8. Web Storage API
  9. 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. 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. 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. 12. Web SQL Database
  13. 13. Opening the Database
  14. 14. Creating a Table
  15. 15. Adding data to a table
  16. 16. Querying the data in a table
  17. 17. Deleting data from a table
  18. 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. 19. Indexed Database
  20. 20. Opening the database
  21. 21. Creating an Object Store
  22. 22. Adding data to a store
  23. 23. Querying the data in a store
  24. 24. Deleting data from a store
  25. 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. 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. 27. Security Check
  28. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×