a brief introduction to local storage

A Brief Introduction to localStorage

Shouqiang Gong - @StuPig_me

13年7月19⽇日星期五

API

Read more: localStorage spec


http://dev.w3.org/html5/webstorage/%23the-localstorage-attribute


APIMETHOD 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


http://locachejs.org/


http://brian.io/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


https://github.com/marcuswestin/store.js

https://github.com/marcuswestin/store.js





Event

Read more: storage event spec


http://dev.w3.org/html5/webstorage/%23event-storage


Event

PROPERTY TYPE

key string

oldValue any

newValue any

url string

*timestamp double

Read more: storage event spec




StorageEvent

other libraies: StorageEvent


https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent


StorageEvent// StorageEvent doesn’t bubble and is not cancelable

window.addEventListener('storage', function (e) { if (!e) e = window.event;}, false)

// trigger the event manuallyvar evt = document.createEvent('StorageEvent');// args: type canBubble cancelBubble key oldVaule // newValue url storageAreaevt.initStorageEvent('StorageEvent', ...);window.dispatch(evt);

other libraies: StorageEvent




Compatibility


Compatibilityworks well in major browsers...


Capacity

Read more: localStorage capacity


http://dev-test.nemikor.com/web-storage/support-test/


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





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

Browser localStorage sessionStorage globalStorage

Android2.2 - 4.2 2.49M unlimited

(except 3.0) none

iPhone3.1 - 6.1 2.49M 2.49M none

Chrome Mobile16 - 28 2.49M 2.49M none

IE Mobile9 - 10 4.75M 4.75M none





Scope


Scope• is scoped to the subdomain



• values on Secure (SSL) pages are isolated




• sessionStorage values survive some browser restarts




• sessionStorage values survive some browser restarts

• values created in “incognito” mode are isolated


Usage


Usage

• persistent user data


Usage


• persistent app state


Usage



• filled-in forms


Usage



• filled-in forms

• client cache


Persistent User Data

try: Dillinger


http://dillinger.io/


Persistent User Datasave user profile...

try: Dillinger




Persistent App State

try: JSHint


http://www.jshint.com/


Persistent App Stateremember checked options...

try: JSHint




Filled-in Forms

try: autoStorage Savify


https://github.com/phunkei/autoStorage


https://github.com/blackcoat/Savify


Filled-in Formsremember author information...

try: autoStorage Savify






Client Cache

Specialized libraries: lscache, Inject, Basket.js


http://github.com/pamelafox/lscache


https://github.com/linkedin/inject


http://addyosmani.github.com/basket.js/


Client Cache

• cache API results









Client Cache


• cache AJAX results









Client Cache


• cache AJAX results

• cache resources









Abusage

Read more: localStorage performance


http://calendar.perfplanet.com/2012/is-localstorage-performance-a-problem/


Abusage• serialize unnecessarily






• excessive keys






• excessive keys

• excessive gets/sets






• excessive keys


• block the UI






• excessive keys


• block the UI

• assume localStorage always works






• excessive keys


• block the UI

• assume localStorage always works

• use key names that collide





Don’t Serialize Unnessarily

try: Primitives vs. Strings JSON.stringify


http://jsperf.com/passing-strings-vs-primitive-in-localstorage


http://jsperf.com/json-stringify-or-string-for-localstorage


Don’t Serialize Unnessarilybefore:

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









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









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


use strings where possible







try: String split/join vs. JSON Stringify


http://jsperf.com/localstorage-serialization-json-vs-custom



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







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: Multiple keys vs. JSON2 keys vs. JSON


http://jsperf.com/localstorage-1-object-vs-many-keys1


http://jsperf.com/serializing-json-vs-using-2-keys-in-localstorage



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









after:

localStorage.setItem('location-state', 'texas');localStorage.setItem('location-city', 'austin');









after:

localStorage.setItem('location-state', 'texas');localStorage.setItem('location-city', 'austin');


store multiple strings instead of 1 object if it is faster







try: 1 long key vs. multiple short keys



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





after:

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





after:

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


combine logical keys commonly accessed together



try: Caching in local memoryCaching in the DOM


http://teaching-materials.org/exercises/


https://gist.github.com/2928064



$('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')); });};









after:window.onunload = function() { $('input[type="checkbox"]').each(function() { localStorage.setItem($(this).attr('name'), $(this).is(':checked')); });};


cache data in local memory/DOM，and only get/set on window load/unload







try: Not blocking the UI in tight js loops


http://www.kryogenix.org/days/2009/07/03/not-blocking-the-ui-in-tight-javascript-loops



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







after:<body></body><script>window.onload = function() { $('#name').html(localStorage.getItem('name'));};</script>







after:<body></body><script>window.onload = function() { $('#name').html(localStorage.getItem('name'));};</script>


defer using localStorage until onload





try: Nicholas Zakas: Responsive Interfaces


http://www.slideshare.net/nzakas/responsive-interfaces



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







after:$('button').click(function() { window.setTimeout(function() { var name = localStorage.getItem('name'); $('#name').html(name); }, 10);});







after:$('button').click(function() { window.setTimeout(function() { var name = localStorage.getItem('name'); $('#name').html(name); }, 10);});


use setTimeout to defer localStorage access





try: jQuery throttle/debounce plugin2 localStorage tips


http://benalman.com/projects/jquery-throttle-debounce-plugin/


http://horia.me/two-tips-for-localstorage



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









after:$('textarea').keydown(function() { $.debounce(250, function() { localStorage.setItem('text', $(this).text()); });});









after:$('textarea').keydown(function() { $.debounce(250, function() { localStorage.setItem('text', $(this).text()); });});


throttle or debounce to avoid repetitive gets/sets






Don’t Serialize Unnessarilybad:

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




better:if (window.localStorage) { localStorage.setItem('bla', 'bla');}





best:if (window.localStorage) { try { localStorage.setItem('bla', 'bla'); } catch(e) { if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { } else { } }}





best:if (window.localStorage) { try { localStorage.setItem('bla', 'bla'); } 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


http://jsperf.com/use-descriptive-names



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







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








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








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


use highliy descriptive keys with pseudo namespaces




QA


a brief introduction to local storage

Business