11. Snippet
// original API
localStorage.setItem('decade', '00s');
localStorage.setItem('song', JSON.stringify({artist:
'ColdPlay', title: 'Yellow'}));
var decade = localStorage.getItem('decade');
var song = JSON.parse(localStorage.getItem('song'));
alert('Best song in the ' + decade + ' was ' + song.title
+ ' by ' + song.artist);
13年7月19⽇日星期五
22. StorageEvent
// StorageEvent doesn’t bubble and is not cancelable
window.addEventListener('storage', function (e) {
if (!e)
e = window.event;
}, false)
// trigger the event manually
var evt = document.createEvent('StorageEvent');
// args: type canBubble cancelBubble key oldVaule
// newValue url storageArea
evt.initStorageEvent('StorageEvent', ...);
window.dispatch(evt);
other libraies: StorageEvent
13年7月19⽇日星期五
35. Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
13年7月19⽇日星期五
36. Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
• sessionStorage values survive some
browser restarts
13年7月19⽇日星期五
37. Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
• sessionStorage values survive some
browser restarts
• values created in “incognito” mode are
isolated
13年7月19⽇日星期五
68. Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join(','));
var fruits = localStorage.getItem('fruits').split(',');
try: String split/join vs. JSON Stringify
13年7月19⽇日星期五
69. Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join(','));
var fruits = localStorage.getItem('fruits').split(',');
after:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', JSON.stringify(fruits));
var fruits = JSON.parse(localStorage.getItem('fruits'));
try: String split/join vs. JSON Stringify
13年7月19⽇日星期五
70. Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join(','));
var fruits = localStorage.getItem('fruits').split(',');
after:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', JSON.stringify(fruits));
var fruits = JSON.parse(localStorage.getItem('fruits'));
use own serializer if its faster
try: String split/join vs. JSON Stringify
13年7月19⽇日星期五
81. Don’t Serialize Unnessarily
before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name'), $
(this).is(':checked'));
});
after:
window.onunload = function() {
$('input[type="checkbox"]').each(function() {
localStorage.setItem($(this).attr('name'), $
(this).is(':checked'));
});
};
try: Caching in local memory
Caching in the DOM
13年7月19⽇日星期五
82. Don’t Serialize Unnessarily
before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name'), $
(this).is(':checked'));
});
after:
window.onunload = function() {
$('input[type="checkbox"]').each(function() {
localStorage.setItem($(this).attr('name'), $
(this).is(':checked'));
});
};
try: Caching in local memory
Caching in the DOM
cache data in local memory/DOM,and only get/set on
window load/unload
13年7月19⽇日星期五