3. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
4. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
5. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
6. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
7. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
8. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
9. Why use local storage?
Decrease page load time
Reduce # of HTTP requests
WordPress admin UI
Put processing (sorting, filtering, etc.) on client
MySpace Inbox Searching
Monday, November 1, 2010
23. openDatabase();
Size
Default database size 5MB
Prompted after that: 5, 10, 50, 100, etc.
Versioning
Required - Exception if doesn't match
Creation Callback
Called if database is brand new
Returns null if not successful
Monday, November 1, 2010
25. executeSql();
tx.executeSql('CREATE TABLE IF NOT EXISTS
test (id unique, text)');
tx.executeSql('INSERT INTO test (id, text)
VALUES (?, ?)', [someId, someText]);
Monday, November 1, 2010
26. executeSql();
tx.executeSql('SELECT * FROM test', [],
function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
console.log(results.rows.item(i).text);
}
}
);
Monday, November 1, 2010
30. IndexedDB
Object based data store
Locate records by key or index
Asynchronous & Synchronous API
For the browser and for web workers
Monday, November 1, 2010
31. Creating an object store
Key path must be the name of an enumerated property
of all objects being stored in the object store
DB versioning up to caller
var db = window.indexedDB.open("FriendDB", "My Friends!");
if (db.version != "1") {
// User's first visit, initialize database.
db.createObjectStore("Friends", // Name
"id", // Key Path
true); // Auto Increment
db.setVersion("1");
} else {
// DB already initialized
}
Monday, November 1, 2010
32. Stocking the store
Auto-increment keys get
assigned automatically
Schema flexible, store anything
var store = db.openObjectStore("Friends");
var brad = store.put({name: "Brad",
gender: "male",
likes: "yoga"});
console.log(brad.id); // 1
Monday, November 1, 2010
33. Finding things
Create indexes
Query using cursors
db.createObjectStore("Friend", "id", true);
db.createIndex("FriendLikes", "Friend", "likes", false);
db.createIndex("FriendName", "Friend", "name", false);
var index = db.openIndex("FriendLikes");
var range = new KeyRange.bound("B", "C");
var cursor = index.openObjectCursor(range);
var moreFriends = true;
while (moreFriends) {
alert(cursor.value.name);
moreFriends = cursor.continue();
}
Monday, November 1, 2010
35. Application Cache
A big offline bucket
Pretty good mobile support
Declarative API:
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
Programmable API:
http://www.w3.org/TR/DataCache/
Monday, November 1, 2010