Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

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