An Overview of HTML5 Storage
-
Upload
paul-irish -
Category
Technology
-
view
4.157 -
download
2
description
Transcript of An Overview of HTML5 Storage
![Page 1: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/1.jpg)
HTML5 StoragePaul IrishNov 1st, 2010
Monday, November 1, 2010
![Page 2: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/2.jpg)
Monday, November 1, 2010
![Page 3: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/3.jpg)
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
![Page 4: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/4.jpg)
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
![Page 5: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/5.jpg)
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
![Page 6: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/6.jpg)
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
![Page 7: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/7.jpg)
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
![Page 8: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/8.jpg)
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
![Page 9: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/9.jpg)
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
![Page 10: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/10.jpg)
Before HTML5...
Cookies
Flash Storage
Internet Explorer UserData
Gears
Dojo Storage
Monday, November 1, 2010
![Page 11: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/11.jpg)
HTML5 storage options
localStoragesessionStorage
Web SQL Database
IndexedDB App Cache
Monday, November 1, 2010
![Page 12: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/12.jpg)
Local Storage
Key/Value pairsHashtableAvoids HTTP overhead of cookies
Monday, November 1, 2010
![Page 13: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/13.jpg)
Local Storage
window.localStorage
persistent
window.sessionStorage
Last as long as browser is openSurvives page reloads and restoresOpening page in new window or tab starts new session
Monday, November 1, 2010
![Page 14: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/14.jpg)
localStorage API
localStorage.setItem(‘someKey’, someValue);
localStorage.getItem(‘someKey’); // value
Can also use it directly, but not recommended
localStorage.someKey = someValue;
Monday, November 1, 2010
![Page 15: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/15.jpg)
localStorage API
localStorage.setItem(‘foo’,‘omg!’);
localStorage.getItem(‘foo’); // ‘omg!’
localStorage.length // num of items stored
localStorage.key(0); // ‘foo’
localStorage.removeItem(‘foo’);
localStorage.clear();
Monday, November 1, 2010
![Page 16: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/16.jpg)
localStorage API
Scoped to the origin
http://example.com:80/ /\ /\ /\ | | \_ port | \_ domain \_ scheme
Monday, November 1, 2010
![Page 17: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/17.jpg)
JSBIN scratchpad
Monday, November 1, 2010
![Page 18: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/18.jpg)
Native JSON
localStorage only stores strings
(so far!)
Everyone that supports localStorage supports native JSON
JSON.stringify( obj );
JSON.parse( somejsonstring );
Monday, November 1, 2010
![Page 19: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/19.jpg)
JSON & localStorageBest Friends.
Setting...
localStorage.setItem(‘bestobj’, JSON.stringify(obj));
Getting...
var obj = JSON.parse( localStorage.getItem(‘bestobj’));
Monday, November 1, 2010
![Page 20: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/20.jpg)
textshadow presets!
Monday, November 1, 2010
![Page 21: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/21.jpg)
Web SQL Database
SQL database
Basically wrapper around SQLite
Monday, November 1, 2010
![Page 22: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/22.jpg)
openDatabase();
openDatabase(dbName, version, description, estimatedSize, creationCallback)
var db = openDatabase('test', '1.0', 'test database', 2 * 1024 * 1024, myCallback);
Monday, November 1, 2010
![Page 23: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/23.jpg)
openDatabase();
SizeDefault database size 5MBPrompted after that: 5, 10, 50, 100, etc.
VersioningRequired - Exception if doesn't match
Creation CallbackCalled if database is brand new
Returns null if not successful
Monday, November 1, 2010
![Page 24: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/24.jpg)
Transactions
db.transaction(function(tx){});
db.readTransaction(function(tx){});
Both can optionally take an error and success callback
Monday, November 1, 2010
![Page 25: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/25.jpg)
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
![Page 26: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/26.jpg)
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
![Page 27: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/27.jpg)
But.... Web SQL Database....
Is kinda dead.
Monday, November 1, 2010
![Page 28: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/28.jpg)
But.... Web SQL Database....
Is kinda dead.
Monday, November 1, 2010
![Page 29: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/29.jpg)
But.... Web SQL Database....
Is kinda dead.
Monday, November 1, 2010
![Page 30: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/30.jpg)
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
![Page 31: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/31.jpg)
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
![Page 32: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/32.jpg)
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
![Page 33: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/33.jpg)
Finding thingsCreate 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
![Page 34: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/34.jpg)
deciphering evercookie
Monday, November 1, 2010
![Page 35: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/35.jpg)
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
![Page 36: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/36.jpg)
Application Cache<!doctype html><html manifest="myapp.manifest">
<title>My offline app</title> <link rel="stylesheet" href="myapp.css"> <img src="myapp.png" />
<script src="myapp.js"></script></html>
CACHE MANIFESTmyapp.htmlmyapp.jsmyapp.cssmyapp.png
Monday, November 1, 2010
![Page 37: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/37.jpg)
Current SupportLocal Storage
IE 8+, Firefox 3+, Safari 4+, Chrome 3+, Opera 10.5+
Native JSONFirefox 3.5+, IE 8+, Chrome 4+, Safari 4+, Opera 10.5+
Web SQL DatabaseSafari 3.2+, Chrome 3.0+, Opera 10.5+
IndexedDBChrome 8, Firefox 4.0
Application Cache (Manifest)Firefox 3.5+, Chrome 4+, Safari 4+
Monday, November 1, 2010
![Page 38: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/38.jpg)
Detecting Support
if (Modernizr.localstorage) { ... }
if (Modernizr.sessionstorage) { ... }
if (Modernizr.websqldatabase) { ... }
Monday, November 1, 2010
![Page 39: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/39.jpg)
Why again?
Message inbox
Twitter app
Friends/Contact List
Autocomplete++
Monday, November 1, 2010
![Page 40: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/40.jpg)
Crossbrowser?
Yeah, totes!
Monday, November 1, 2010
![Page 41: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/41.jpg)
Crossbrowser?
Yeah, totes!
Monday, November 1, 2010
![Page 42: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/42.jpg)
Go Deeper
www.html5rocks.com/features/storage
caniuse.com
Chromium HTML5 google group
#html5 on freenode IRC
Monday, November 1, 2010
![Page 43: An Overview of HTML5 Storage](https://reader034.fdocuments.us/reader034/viewer/2022050920/54b69c1c4a7959d90f8b47b9/html5/thumbnails/43.jpg)
?Monday, November 1, 2010