1 / 17

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development. Chap 9. Web Storage API. overview. Sometimes referred to as DOMStorage An API that makes it easy to persist data across web requests.

monita
Download Presentation

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Pro HTML5 ProgrammingPowerful APIs for Richer Internet Application Development

  2. Chap 9. Web StorageAPI

  3. overview • Sometimes referred to as DOMStorage • An API that makes it easy to persist data across web requests. • As Is: Remote web servers needed to store any data that persisted by sending it back and forth from client to server. • To Be: Store data directly on the client side in the browser for repeated access across requests or to be retrieved. • Advantage: Reducing network traffic • Web Storage • Local storage • Session storage • Web sql database

  4. Comparison with Cookies • Cookies: • Old technique for passing small data values between programs. • Extremely limited in size. (4KB) • Cookies are transmitted back and forth from server to browser on every request scoped to that cookie. • Coolie data is visible on the network • making them a security risk when not encrypted. • Any data persisted as cookies will be consuming network bandwidth. • Web storage • Can choose to let those values survive either across page loads in a single window or tab or across browser restarts, respectively. • Stored data is not transmitted across the network • Larger values can be persisted. (a few megabytes)

  5. Browser Support • Browser support for HTML5 WebStorage • Checking for Browser Support • if (window.sessionStorage) { // support sessionStorage} else { // not support} • if (window.localStorage) { // support localStorage} else { // not support} • Chrome  Developer Tools  Resources  Local/Session Storage

  6. Setting/retrieving values • Setting value • window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); • window.sessionStorage.myFirstKey = ‘myFirstValue’; • Getting value • window.sessionStorage.getItem(‘myFirstKey’) • window.sessionStorage.myFirstKey • Example: • //Do something with sessionStorage • window.sessionStorage.mySessionKey = 'Session example'; • alert(window.sessionStorage.mySessionKey); • //Do something with localStorage • window.localStorage.myLocalKey= 'Local example'; • alert(window.localStorage.myLocalKey);

  7. Plugging data leaks • Mainly for sessionStorage • Stored values will persist as long as the browser window (or tab) is not closed. • Pages served from the same origin—(scheme, host, and port)—then values set on sessionStorage can be retrieved from other pages using the same keys.

  8. LOCAL VERSUS SESSION STORAGE • Web storage • sessionStorage: • Values persist only as long as the window or tab in which they were stored. • Values are only visible within the window or tab that created them • localStorage: • Values persist beyond window and browser lifetimes. • Values are shared across every window or tab running at the same origin.

  9. Web storage attributes and functions interface Storage { readonlyattribute unsigned long length; getter DOMStringkey(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deletervoid removeItem(in DOMString key); void clear(); }; • localStorage.length// num of items stored • localStorage.key(0); // 'dateOfBirth' • localStorage.setItem('dateOfBirth', '1984-07-22'); • localStorage.getItem('dateOfBirth'); // '1984-07-22' • localStorage.removeItem('dateOfBirth'); • localStorage.clear();

  10. Web storage update event • Register • window.addEventListener("storage", displayStorageEvent, true); • displayStorageEvent() is a function name • Storage Event interface StorageEvent : Event { readonly attribute DOMStringkey; readonly attribute any oldValue; readonly attribute any newValue; readonly attribute DOMStringurl; readonly attribute Storage storageArea; }; • storageArea: provides a convenient reference to sessionStorageor localStorage • Ex: addEventListener('storage', function(e){ if (e.oldValue){ alert('changed from \''+e.oldValue+'\' to \''+e.newValue+'\''); } }, false);

  11. Web sql database • Create web database in browser • Use SQL to manage data. • Web Applications Working Group does not intend to maintain it further. • This document was on the W3C Recommendation track but specification work has stopped. • Web Applications Working Group continues work on two other storage-related specifications: Web Storage and Indexed Database API. • On November 18, 2010, the W3C announced that Web SQL database is a deprecated specification.

  12. Browser Support • Browser support for HTML5 Web SQL Database

  13. Web sql database • Database • Each database has one version at a time and can't exist in multiple versions at once. • Authors can manage schema changes incrementally and non-destructively, and without running the risk of old code • DatabaseopenDatabase(DBName, version, displayName, estimatedSize, creationCallback); • Ex: vardb = openDatabase('mydb', '1.0', 'my first database', 2 *1024 * 1024); • Transaction • Give us the ability to rollback. If a transaction — which could contain one or more SQL statements — fails (either the SQL or the code in the transaction), the updates to the database are never committed — i.e. it’s as if the transaction never happened. • db.transaction(function (tx) {  // here be the transaction  // do SQL magic here using the tx object});

  14. Executing SQL statements • tx.executeSql(sqlStatement, arguments, callback, errorCallback) • callback and errorCallback are functions. • callback(transaction, resultset), ex: function(tx, SQLResultSet){} • errorback(transaction, error), ex: function(tx, error){} • SQLResultSet{ readonlyattribute long insertId; readonlyattribute long rowsAffected; readonly attribute SQLResultSetRowListrows; }; • SQLResultSetRowList { readonlyattribute unsigned long length; getter any item(in unsigned long index); };

  15. Web sqlDb manipulation • Open DB function openDB(){ db= window.openDatabase("myDB", "1.0", "First DB", 2*1024*1024); } • Create table function initDB(){ db.transaction(function (tx){ tx.executeSql('CREATE TABLE IF NOT EXISTS racers (id integer primary key autoincrement, name)'); }); } • Insert function insertData(name){ db.transaction(function (tx){ tx.executeSql('INSERT INTO racers (name) VALUES (?)', [name], function(tx, results){ alert(results.insertId); }); }); }

  16. Web sqlDb manipulation • Select function selectData(){ db.transaction(function (tx){ tx.executeSql('SELECT * from racers', [], function (tx, results){ varstr; for(vari=0; i<results.rows.length; i++){ str= str + results.rows.item(i).name + “;"; } alert(str); }); }); }

  17. Pratice

More Related