HTML5 Data Storage
-
Upload
allan-huang -
Category
Technology
-
view
92 -
download
1
description
Transcript of HTML5 Data Storage
![Page 2: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/2.jpg)
Agenda
Data Storage Cookie Web Storage
Session Storage Local Storage
Database Storage Web SQL Database Indexed Database
![Page 3: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/3.jpg)
Data Storage
![Page 4: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/8.jpg)
Web Storage API
![Page 9: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/12.jpg)
Web SQL Database
![Page 13: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/13.jpg)
Opening the Database
![Page 14: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/14.jpg)
Creating a Table
![Page 15: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/15.jpg)
Adding data to a table
![Page 16: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/16.jpg)
Querying the data in a table
![Page 17: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/17.jpg)
Deleting data from a table
![Page 18: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/19.jpg)
Indexed Database
![Page 20: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/20.jpg)
Opening the database
![Page 21: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/21.jpg)
Creating an Object Store
![Page 22: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/22.jpg)
Adding data to a store
![Page 23: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/23.jpg)
Querying the data in a store
![Page 24: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/24.jpg)
Deleting data from a store
![Page 25: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/25.jpg)
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
![Page 26: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/26.jpg)
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
![Page 27: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/27.jpg)
Security Check
![Page 28: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/28.jpg)
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
![Page 29: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/29.jpg)
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
![Page 30: HTML5 Data Storage](https://reader033.fdocuments.in/reader033/viewer/2022051109/54922224ac795939288b46c3/html5/thumbnails/30.jpg)
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