HTML5 Data Storage
Upcoming SlideShare
Loading in...5
×
 

HTML5 Data Storage

on

  • 334 views

 

Statistics

Views

Total Views
334
Views on SlideShare
334
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Data Storage HTML5 Data Storage Presentation Transcript

  • HTML5 Data Storage allanhuang@eSobi.com
  • Agenda  Data   Cookie Web Storage    Storage Session Storage Local Storage Database Storage   Web SQL Database Indexed Database
  • Data Storage
  • 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 API
  • 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
  • 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 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
  • 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 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
  • Security Check
  • 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