A Brief Introduction To Local Storage

A Brief Introduction
to localStorage
Shouqiang Gong - @StuPig_me
13年7月19⽇日星期五

API
Read more: localStorage spec

API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key int index string key
length int length
Read more: localStorage spec

Snippet

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);

Store.js
other libraies: locache, LawnChair

Store.js
// 3rd library - store.js
// https://github.com/marcuswestin/store.js
store.set('decade', '00s')
store.set('song', {artist: 'ColdPlay', title: 'Yellow'});
var decade = store.get('decade');
var song = store.get('song');
alert('Best song in the ' + decade + ' was ' + song.title
+ ' by ' + song.artist);
other libraies: locache, LawnChair

Event
Read more: storage event spec

Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec

StorageEvent
other libraies: StorageEvent

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

Compatibility

Compatibility
works well in major browsers...

Capacity
Read more: localStorage capacity

Capacity
has a limited capacity (2-5MB) per subdomain...

Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4.2 2.49M unlimited
(except 3.0) none
iPhone
3.1 - 6.1 2.49M 2.49M none
Chrome Mobile
16 - 28 2.49M 2.49M none
IE Mobile
9 - 10 4.75M 4.75M none

Scope

Scope
• is scoped to the subdomain

Scope
• values on Secure (SSL) pages are
isolated

Scope
isolated
• sessionStorage values survive some
browser restarts

Scope
isolated
• sessionStorage values survive some
browser restarts
• values created in “incognito” mode are
isolated

Usage

Usage
• persistent user data

Usage
• persistent app state

Usage
• ﬁlled-in forms

Usage
• ﬁlled-in forms
• client cache

Persistent User Data
try: Dillinger

Persistent User Data
save user proﬁle...
try: Dillinger

Persistent App State
try: JSHint

Persistent App State
remember checked options...
try: JSHint

Filled-in Forms
try: autoStorage Savify

Filled-in Forms
remember author information...
try: autoStorage Savify

Client Cache
Specialized libraries: lscache, Inject, Basket.js

Client Cache
• cache API results

Client Cache
• cache AJAX results

Client Cache
• cache AJAX results
• cache resources

Abusage
Read more: localStorage performance

Abusage
• serialize unnecessarily

Abusage
• excessive keys

Abusage
• excessive keys
• excessive gets/sets

Abusage
• excessive keys
• block the UI

Abusage
• excessive keys
• block the UI
• assume localStorage always works

Abusage
• excessive keys
• block the UI
• assume localStorage always works
• use key names that collide

Don’t Serialize Unnessarily
try: Primitives vs. Strings
JSON.stringify

before:
function store(key, val) {
localStorage.setItem(key, JSON.stringify(val));
}
store('num', 1);
store('on', true);
store('name', 'pamela');
JSON.stringify

before:
}
store('num', 1);
store('on', true);
after:
localStorage.setItem(key, val);
}
store('num', '1');
store('on', 'true');
JSON.stringify

before:
}
store('num', 1);
store('on', true);
after:
localStorage.setItem(key, val);
}
store('num', '1');
store('on', 'true');
JSON.stringify
use strings where possible

try: String split/join vs. JSON Stringify

before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join(','));
var fruits = localStorage.getItem('fruits').split(',');

before:
after:
localStorage.setItem('fruits', JSON.stringify(fruits));
var fruits = JSON.parse(localStorage.getItem('fruits'));

before:
after:
localStorage.setItem('fruits', JSON.stringify(fruits));
var fruits = JSON.parse(localStorage.getItem('fruits'));
use own serializer if its faster

try: Multiple keys vs. JSON
2 keys vs. JSON

before:
localStorage.setItem('location', JSON.stringify({'state':
'texas', 'city': 'austin'}));
2 keys vs. JSON

before:
after:
localStorage.setItem('location-state', 'texas');
localStorage.setItem('location-city', 'austin');
2 keys vs. JSON

before:
after:
localStorage.setItem('location-state', 'texas');
localStorage.setItem('location-city', 'austin');
2 keys vs. JSON
store multiple strings instead of 1 object if it is faster

try: 1 long key vs. multiple short keys

before:
localStorage.setItem('first', 'pamela');
localStorage.setItem('middle', 'susan');
localStorage.setItem('last', 'fox');

before:
after:
localStorage.setItem('name', 'pamela susan fox');

before:
after:
localStorage.setItem('name', 'pamela susan fox');
combine logical keys commonly accessed together

try: Caching in local memory
Caching in the DOM

before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name'), $
(this).is(':checked'));
});
Caching in the DOM

before:
});
after:
window.onunload = function() {
$('input[type="checkbox"]').each(function() {
});
};
Caching in the DOM

before:
});
after:
window.onunload = function() {
$('input[type="checkbox"]').each(function() {
});
};
Caching in the DOM
cache data in local memory/DOM，and only get/set on
window load/unload

try: Not blocking the UI in tight js loops

before:
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>

before:
<head>
<script>
</script>
</head>
after:
<body></body>
<script>
window.onload = function() {
};
</script>

before:
<head>
<script>
</script>
</head>
after:
<body></body>
<script>
window.onload = function() {
};
</script>
defer using localStorage until onload

try: Nicholas Zakas: Responsive Interfaces

before:
$('button').click(function() {
var name = localStorage.getItem('name');
$('#name').html(name);
});

before:
});
after:
window.setTimeout(function() {
}, 10);
});

before:
});
after:
window.setTimeout(function() {
}, 10);
});
use setTimeout to defer localStorage access

try: jQuery throttle/debounce plugin
2 localStorage tips

before:
$('textarea').keydown(function() {
localStorage.setItem('text', $(this).text());
});
2 localStorage tips

before:
});
after:
$.debounce(250, function() {
});
});
2 localStorage tips

before:
});
after:
$.debounce(250, function() {
});
});
2 localStorage tips
throttle or debounce to avoid repetitive gets/sets

bad:
localStorage.setItem('bla', 'bla');

bad:
better:
if (window.localStorage) {
}

bad:
better:
}
best:
try {
} catch(e) {
if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name ===
'NS_ERROR_DOM_QUOTA_REACHED') {
} else {
}
}
}

bad:
better:
}
best:
try {
} catch(e) {
if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name ===
'NS_ERROR_DOM_QUOTA_REACHED') {
} else {
}
}
}
check for feature support

try: long vs. short names

bad:
localStorage.setItem('name', 'pamela');

bad:
better:
localStorage.setItem('conference-speaker-first-name',
'pamela');

bad:
better:
'pamela');
best:
lscache.setBucket('conference-speaker');
lscache.set('first-name', 'pamela');

bad:
better:
'pamela');
best:
lscache.setBucket('conference-speaker');
lscache.set('first-name', 'pamela');
use highliy descriptive keys with pseudo namespaces

A Brief Introduction To Local Storage

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Kürzlich hochgeladen

Kürzlich hochgeladen (14)

A Brief Introduction To Local Storage