A Brief Introduction To Local Storage

A Brief Introduction to localStorage

Shouqiang Gong - @StuPig_me

13年7月19⽇日星期五

Read more: localStorage performance

Abusage• serialize unnecessarily

• 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

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

use strings where possible

try: String split/join vs. JSON Stringify

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

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

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

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

try: Not blocking the UI in tight js loops

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

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

defer using localStorage until onload

try: Nicholas Zakas: 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);});

use setTimeout to defer localStorage access

try: jQuery throttle/debounce plugin2 localStorage tips

$('textarea').keydown(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 { } }}

check for feature support

try: long vs. short names

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

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

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

use highliy descriptive keys with pseudo namespaces

A Brief Introduction To Local Storage

Business

A Brief Introduction of BFOPay

Brief introduction to Henrik Christophersen

A Brief Introduction to Patanjali's Yoga sutra

VS- Brief Introduction of Products

A brief introduction to Machine Learning

Professional Organic Salon Products - O'Right Brief Bbrand Introduction

Brief introduction of aLeaves (mainly in Japanese)

2002-10-17. Brief Introduction of LAMOST Brief Introduction of BADC Virtual Observatory of China VO-oriented LAMOST

A Brief Introduction to Relativistic Quantum Mechanicscheng.physics.ucdavis.edu/teaching/230A-s09/rqm_all.pdf · A Brief Introduction to Relativistic Quantum Mechanics Hsin-Chia Cheng,

A Brief Introduction to Magnetotellurics and Controlled

40HRS Brief Introduction

Brief Introduction to China’s Space Astronomy Programs · Brief Introduction to China’s Space Astronomy Programs Shuang-Nan Zhang zhangsn@ihep.ac.cn Center for Particle Astrophysics

SDR Hardware and Fault Treatment Brief Introduction

A brief introduction to Nuclear Physicsastroserve.mines.edu/ph326/2017/lectures/1_Nuclear_326_post.pdf · A brief introduction to Nuclear Physics Where can you get high energy particles?

Social media in Sri Lanka: A brief introduction

A Brief and Friendly Introduction to Mixed-Effects Models ...idiom.ucsd.edu/~rlevy/presentations/cuny2009/hierarchical_models_intro.pdfA Brief and Friendly Introduction to Mixed-Eﬀects

A Brief Introduction of Speech Lesson 1

Software-Defined Networking SDN - A Brief Introduction

A Brief Introduction to Cryptography - Parshuram …parshurambudhathoki.weebly.com/uploads/3/8/0/2/38024669/...A Brief Introduction to Cryptography Parshuram Budhathoki Assistant Professor

A brief introduction to IMS (Interactive Music Studio)