HTML5 Data Storage


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 Data Storage

  1. 1. HTML5 Data Storage
  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.