HTML 5 Local Storage best practices with demo
- The Local storage in HTML5 is used to store data on client side.
- The Local storage stores the saved data on a user's computer even after closing the browser window.
- We need to be careful while using Local storage, as it could slow down your site.
- In this article we will see how not to use Local storage.
- Do not serialize unnecessarily
- Do not use excessive keys
- Do not use excessive gets/sets
- Do not block the UI
- Do not assume local storage will always work
- Do not use key names that collide
Do not serialize unnecessarily
Before
function store(key, val) {
localStorage.setItem(key, JSON.stringify(val));
}
store('num', 1);
store('on', true);
store('name', 'HTML5');
After function store(key, val) {
localStorage.setItem(key, val);
}
store('num', '1');
store('on', 'true');
store('name', 'HTML5');
Use the string where possible avoiding serializing most of the time.
Do not use excessive keys
Before
localStorage.setItem('first', 'HTML5');
localStorage.setItem('middle', 'Storage');
localStorage.setItem('last', 'Local Storage');
After
localStorage.setItem('name', 'Local Storage');
Always avoid creating multiple keys when you can have single for multiple data.
Do not use excessive gets/sets
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'));
});
};
Do cache data in local memory or the DOM, and only get/set on window load/unload.Do not block the UI
Before
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>
After <html>
<body></body>
<script>
window.onload = function () {
$('#name').html(localStorage.getItem('name'));
};
</script>
</html>
Do defer or avoid using localStorage until onload.
Before
$('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);
});
Do use setTimeout to defer localStorage access.
Before
$('textarea').keydown(function() {
localStorage.setItem('text', $(this).text());
});
After
$('textarea').keydown(function() {
$.debounce(250, function() {
localStorage.setItem('text', $(this).text());
});
});
Do not assume local storage will always work
Bad
localStorage.setItem('Hello', 'World');
Better
if (window.localStorage) {
localStorage.setItem('Hello', 'World');
}
Best
if (window.localStorage) {
try {
localStorage.setItem('Hello', 'World');
} catch(e) {
if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
} else {
}
}
}
Do check for feature support, writeable, and quota.
Do not use keys that collide
Before
localStorage.setItem('name', 'HTML5');
After localStorage.setItem('first-name', 'HTML5');
Do use highly descriptive keys and avoid using keys that collide.
