html5 data storage
DESCRIPTION
TRANSCRIPT
Agenda
Data Storage Cookie Web 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 we really want is… A lot of storage space… On the client…
Increase accessibility That persists beyond a page refresh…
More responsiveness And is not transmitted to the server
Reduced load on server
Web Storage
Browser Support Limit it to about 5 MB per domain Already available in all major new browsers
Session Storage 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;long length; string key(long position);string key(long position); string string getItemgetItem(string key);(string key); void void setItemsetItem(string key, string value);(string key, string value); void void removeItemremoveItem(string key);(string key); void void clearclear();();
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 : stringkey : string oldValue : string / nulloldValue : string / null newValue : string / nullnewValue : string / null url : stringurl : string storageArea : storagestorageArea : 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, et
c.), but not Firefox or IE W3C announced that It is deprecated Steep learning curve, requiring knowledge of relational dat
abases 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 NoSQLNoSQL 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 Web SQL Database Indexed Database
Advantages A real, relational database implementation on the client (SQLiteSQLite)
•Allows fast indexing and searching of objects, so in a web application scenario, you can manage your data and read/write it fast•A NoSQLNoSQL 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 event-driven module of JavaScript
Disadvantages • The spec is deprecated• Overhead of SQL language
you need to master and transform your JavaScript objects into relational schema
• Not object-driven
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