Embed Size (px)
DESCRIPTION
Presentation on client-side storage options, including HTML 5, Dojo Storage, and Gears.
Citation preview
Beyond Cookies: Persistent Storage for
Web Applications
Brad NeubergGoogle
What?
What?
4K
What?
4K100K
What?
4K100K500K
What?
4K100K500K>1 MB
What?
• Name/Value Storage
• Database
• Static Files
Why?
“640K ought to be enough for anybody”
Why?
“640K ought to be enough for anybody”
Why?
• Offline
• Capabilities of client
• Lower Latency
• No server
• Performance
• Privacy
Demo of GMail Offline
Zoo of Options
HTML 5
Yahoo!BrowserPlus
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 Interfaceinterface 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
var db = openDatabase("MyDB", "1.0",
"Example", 200000);
openDatabase(dbName, version, displayName, expectedSize)
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;
});
SELECTdb.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); }
);
INSERTdb.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 offline
• Cache UI files (JavaScript, HTML, etc.)
Application Cache
• Point to manifest file:
<html manifest=”foo.manifest”>
Application Cache
• Point to manifest file:
<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.htmlhttp://www.foo.com/header.pnghttp://www.foo.com/blah/blahsomethingElse.jpg
Application Cache
Application Cache
• Update process
Application Cache
• Update process
• Manifest file fetched
Application Cache
• Update process
• Manifest file fetched
• If changed
Application Cache
• Update process
• Manifest file fetched
• If changed
• Files refetched in temp cache
Application Cache
• Update process
• Manifest file fetched
• If changed
• Files refetched in temp cache
• When done, becomes real cache
Application Cache
• Update process
• Manifest file fetched
• If changed
• Files refetched in temp cache
• When done, becomes real cache
• Events are fired
Support
• Firefox 3* and 3.1
• Safari 3* and 3.1
• iPhone OS 2.1+
Demo
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 Storagedojox.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 Storagevar message = dojox.storage.get(“message”);
Gears
HTML
CSS
JavaScript
What is Gears?
HTML
CSS
JavaScript
What is Gears?
HTML
CSS
JavaScript
What is Gears?
HTML
CSS
JavaScript
What is Gears?
HTML
CSS
JavaScript
What is Gears?
HTML
CSS
JavaScriptDatabase
Local Server
Worker Pool
Desktop API
Ajax++
Client-Side Search
Blobs
HTML
CSS
JavaScript
Ajax++
Geolocation
File System API
Database APIvar 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 APIvar 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 offline
• Capture UI: HTML, JavaScript, CSS
• Serves locally even when connected
Beyond Cookies: Persistent Storage for
Web Applications
Brad NeubergGoogle
