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

Beyond Cookies:
Persistent Storage for
Web Applications
Brad Neuberg
Google

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

Zoo of Options

Yahoo!
BrowserPlus

HTML 5

Zoo of Options

HTML 5

Name/Value

• sessionStorage
• localStorage

sessionStorage

• Per window
• Example: purchasing plane tickets

sessionStorage
<label>
<input type=quot;checkbox”
onchange=quot;sessionStorage.insurance = checkedquot;>
I want insurance on this trip.
</label>

sessionStorage
<label>
<input type=quot;checkbox”
onchange=quot;sessionStorage.insurance = checkedquot;>
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=quot;countquot;>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];
}

HTML 5 Database

• Full relational database
• SQLite
• Asynchronous APIs

openDatabase

openDatabase(dbName, version, displayName,
expectedSize)

var db = openDatabase(quot;MyDBquot;, quot;1.0quot;,
quot;Examplequot;, 200000);

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

SELECT
tx.executeSql(quot;SELECT id, name FROM COUNTRYquot;,
[],
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
tx.executeSql(
quot;INSERT INTO COUNTRY quot;
+ quot; (id, name) VALUES (?, ?)quot;,
['1', 'United States']);
});

Support

• Safari 3.1
• iPhone OS 2.0+

iPhone

Image: Chris Messina

View Source

View Source of Database Demo

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
• Update process

Application Cache
• Update process
• Manifest ﬁle fetched

Application Cache
• Update process
• If changed

Application Cache
• Update process
• If changed
• Files refetched in temp cache

Application Cache
• Update process
• If changed
• When done, becomes real cache

Application Cache
• Update process
• If changed
• When done, becomes real cache
• Events are ﬁred

Support

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

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(quot;No permission!quot;);
}else if(status == dojox.storage.SUCCESS){
// do something
}
}
);

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

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

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (12)

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

Similaire à Beyond Cookies, Persistent Storage For Web Applications Web Directions North 2009 (20)

Dernier

Dernier (20)

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