Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009

Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google

What?

What? 4K

What? 4K 100K

What? 4K 100K 500K

What? 4K 100K 500K >1 MB

What? • Name/Value Storage • Database • Static Files

Why? “640K ought to be enough for anybody”

Why? • Ofﬂine • Capabilities of client • Lower Latency • No server • Performance • Privacy

Demo of GMail Ofﬂine

Zoo of Options Yahoo! BrowserPlus HTML 5

Zoo of Options HTML 5

HTML 5

Name/Value • sessionStorage • localStorage

sessionStorage • Per window • Example: purchasing plane tickets

sessionStorage <label> <input type=\"checkbox” onchange=\"sessionStorage.insurance = checked\"> I want insurance on this trip. </label>

sessionStorage <label> <input type=\"checkbox” onchange=\"sessionStorage.insurance = checked\"> I want insurance on this trip. </label> if (sessionStorage.insurance) { ... }

localStorage • Per site, multiple windows • Permanent • Example: storing user’s emails

localStorage <p>You have viewed this page <span id=\"count\">an untold number of</span> time(s).</p> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount, 10) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount; </script>

Storage Interface interface Storage { readonly attribute unsigned long length; DOMString key(in unsigned long index); DOMString getItem(in DOMString key); void setItem(in DOMString key, in DOMString data); void removeItem(in DOMString key); void clear(); };

Storage Event • Fired when storage happens • Doesn’t bubble • On Window

Support • Firefox 2* & 3 • Internet Explorer 8 • Safari nightly

*Note Firefox 2 has older version of spec: function getStorage() { if (typeof localStorage != 'undefined') return localStorage; else return globalStorage[window.location.hostname]; }

Demo localStorage Demo

HTML 5 Database

HTML 5 Database • Full relational database • SQLite • Asynchronous APIs

openDatabase openDatabase(dbName, version, displayName, expectedSize) var db = openDatabase(\"MyDB\", \"1.0\", \"Example\", 200000);

CREATE TABLE db.transaction(function(tx) { tx.executeSql(\"CREATE TABLE IF NOT EXISTS\" + \"COUNTRY (id REAL UNIQUE, name TEXT)\", [], function(tx, result) { // SQL executed; do more work }); }, function(tx, error) { alert(error.message); return; });

SELECT db.transaction(function(tx) { tx.executeSql(\"SELECT id, name FROM COUNTRY\", [], function(tx, result) { for (var i = 0; i < result.rows.length; + +i) { var row = result.rows.item(i); alert('id='+row['id'); alert(' name='+row['name']); } }, function(tx, err) { alert(err.message); } );

INSERT db.transaction(function(tx) { tx.executeSql( \"INSERT INTO COUNTRY \" + \" (id, name) VALUES (?, ?)\", ['1', 'United States']); });

Support • Safari 3.1 • iPhone OS 2.0+

iPhone Image: Chris Messina

Demo Database Demo

View Source View Source of Database Demo

HTML 5 Application Cache

Application Cache • Ability to go ofﬂine • Cache UI ﬁles (JavaScript, HTML, etc.)

Application Cache • Point to manifest ﬁle: <html manifest=”foo.manifest”>

Application Cache • Point to manifest ﬁle: <html manifest=”foo.manifest”> • foo.manifest must have correct MIME type: • text/cache-manifest

Application Cache • Example manifest: CACHE MANIFEST # v1 # This is a comment. http://www.foo.com/index.html http://www.foo.com/header.png http://www.foo.com/blah/blah somethingElse.jpg

Application Cache

Application Cache • Update process

Application Cache • Update process • Manifest ﬁle fetched

Application Cache • Update process • Manifest ﬁle fetched • If changed

Application Cache • Update process • Manifest ﬁle fetched • If changed • Files refetched in temp cache

Application Cache • Update process • Manifest ﬁle fetched • If changed • Files refetched in temp cache • When done, becomes real cache

Application Cache • Update process • Manifest ﬁle fetched • If changed • Files refetched in temp cache • When done, becomes real cache • Events are ﬁred

Support • Firefox 3* and 3.1 • Safari 3* and 3.1 • iPhone OS 2.1+

Demo

Dojo Storage • Open source • Figures out best storage • Flash • HTML 5 • Gears

Dojo Storage • Name/value hashtable • storage.js (~13K GZip) • dojo.js (~26K) • http://dojotoolkit.org

Dojo Storage dojox.storage.put(“message”, “hello world”, function(status, keyName){ if(status == dojox.storage.FAILED){ alert(\"No permission!\"); }else if(status == dojox.storage.SUCCESS){ // do something } } );

Dojo Storage var message = dojox.storage.get(“message”);

Gears

JavaScript CSS HTML What is Gears?

JavaScript Database Desktop API CSS Client-Side Search Local Server HTML Blobs Worker Pool Ajax++

JavaScript File System API CSS Geolocation HTML Ajax++

Database API var db = google.gears.factory.create('beta.database'); db.open('database-test'); db.execute('CREATE TABLE IF NOT EXISTS Test' + ' (Phrase TEXT, Timestamp INT)'); db.execute('INSERT INTO Test VALUES (?, ?)', ['Monkey!', new Date().getTime()]);

Database API var rs; try { rs = db.execute('SELECT * FROM Test ORDER BY Timestamp DESC'); while (rs.isValidRow()) { console.log(rs.fieldByName(‘Phrase’) + '@' + rs.fieldByName(‘Timestamp’)); rs.next(); } } finally { rs.close(); db.close(); }

Local Server

Local Server • Run web applications ofﬂine • Capture UI: HTML, JavaScript, CSS • Serves locally even when connected

Beyond Cookies: Persistent Storage for Web Applications Brad Neuberg Google

Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009

1 comments

Notes on slide 1

5 Favorites