Using HTML5 Web LocalStorage for improve performance and user experience

1. HTML5 LOCAL STORAGE
Front-End Meetup #7
Lior Zamir
HPE Software Innovation Webmaster
LiorZ@hpe.com
Using HTML5 Web LocalStorage for
Improve Performance and User Experience

2. Agenda
1. Why store data on the client?
2. Methods for storing data on the client-side
3. HTML5 Web Storage
4. Syntax + Demo
5. Use Cases
6. Best Practice

4. Why store data on the client?

5. Why Store Data on the Client?
Use cases:
• You want to increase performance. You can cache data
client-side so it can be retrieved without additional server
requests.
• You want to restore the state of your interface without
forcing people to sign up (HTTP is stateless…).
• You want you make your application work off-line.

6. What are the methods
for storing data
on the client-side?

7. Methods For Storing Data
JavaScript Variables
• Pros:
 The fastest and simplest solution
 No need to serialize or de-serialize data
 Ideal for single-page applications
• Cons:
 Very fragile — linking elsewhere, refreshing/closing the tab will
wipe all data
 Global variables can be overwritten and analyzed by third-party
scripts.

8. Methods For Storing Data
Cookies
• Pros:
 A reliable method of retaining state between the client and server
 With expiry date - data will persist beyond page refreshes and tab closing
 Supported in all modern browsers
• Cons:
 Data is added to every HTTP request header
 Values are strings only — other data must be serialized
 Storage space is limited — 4KB per cookie
 Can be deleted or blocked
 Threat to internet privacy

9. HTML5 Web Storage

10. HTML5 Web Storage
• Pros:
 Easy to use with simple name/value pairs
 Session and persistent storage options are available
 An event model is available to keep other tabs and windows synchronized
 Wide support on desktop and mobile browsers including IE8+
 Do not need to be transmitted with each HTTP request and response until
required
• Cons:
 String values only — serialization may be necessary
 Unstructured data with no transactions, indexing or searching facilities

11. Can I use it?

12. LocalStorage vs SessionStorage
SessionStorage
• Persists a storage area for the duration of the page session.
• Use it when you need to store some data temporarily.
• Data is available:
o As long as the browser is open, including page reloads/restores
o It gets deleted the time when the tab/window who created the session is closed
LocalStorage
• Persists the data until the user explicitly deletes the data.
• Use it when you need to store some data for the long term.
• Data is available:
o Even after the browser is closed and reopened

13. Syntax

14. Web Storage (Second Edition)
W3C Recommendation 19 April 2016
https://www.w3.org/TR/webstorage
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString? getItem(DOMString key);
setter void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};

15. Syntax
• Options for storing data:
o localStorage.setItem("name", "value");
o localStorage.name = "value";
o localStorage["name"] = "value";
• Options for retrieving stored data:
o localStorage.getItem("name");
o localStorage.name;
o localStorage["name"];

16. Syntax
• Options for deleting stored data:
• localStorage.removeItem("name");
• delete localStorage.name;
• delete localStorage["name"];
• All of the stored data can be deleted from localStorage by using:
• localStorage.clear();
 The syntax of sessionStorage is identical (just use “sessionStorage” instead of “localStorage”)

17. Example:
Native API (JSON serialize of objects)
vs
store.js
var car = {};
car.wheels = 4;
car.engine = 1.8;
car.name = 'Alfa Romeo';
store.set('car', car);
car = store.get('car');
console.log(car);
localStorage.setItem('car', JSON.stringify(car));
car = JSON.parse(localStorage.getItem('car'));
console.log(car);
With native API + JSON serialize: With store.js:

18. Debug

19. Use Cases

20. Use Case #1
Improve Performance by Caching

21. Use Case #1
Improve Performance by Caching
A faster site and an offline site:
• Cache API and AJAX results
• Cache resources (e.g. JS/CSS files)
• basket.js - small JavaScript library supporting localStorage caching of scripts.
• Google Search and Bing make extensive use of localStorage for stashing SCRIPT
and STYLE blocks that are used on subsequent page views.
• They have shown that there are performance benefits to caching assets in
localStorage (especially on mobile) when compared to simply reading and writing
from the standard browser cache.

22. We can load some critical path
resources such as a JavaScript that's
required for our UX up to 3 - 5x
faster using localStorage than from
the browser's native cache.
Use Case #1
Improve Performance by Caching
We can use localStorage to make
a mobile website faster!

23. Use Case #2
Improve User Experience

24. Use Case #2
Improve user experience
• For apps that don't want to force user login for interactivity
• Save user profile and favorites (without login)
• Persistent app state:
• Open tabs, expanded/collapsed sections, layout options, dismissed
messages, etc.
• Filled-in forms -
• Login username/email
• Unsaved/unposted drafts
• Stuff that's often the same
• autoStorage.js

25. • If the internet gets disconnected during data transfer, the user can
choose to revisit the site and resend this data.
The user
disconnected
during data
transfer
Upon the user’s
subsequent revisit to the
site, the application
verifies if any key for the
results exists for this
domain
The site presents
the user with an
option to resend
the data (via a
button click)
Use Case #2
Improve user experience

26. Other Use Cases
• For apps that don't have a server-side (yet/ever)
• For apps that live only in the client (extensions/mobile)

27. Best Practice

28. Best practice
• Don't: block the UI
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>
• Do: defer using localStorage until onload
<html>
<body></body>
<script>
window.onload = function() {
$('#name').html(localStorage.getItem('name'));
};
</script>
</html>

29. Best practice
• Don't: assume localStorage works or will always work.
• Do: check for feature support, check if its read/write, and check if its over quota.
Bad:
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 { }
} }
Most localStorage libraries take care of this for you.

30. The Dark Side Of
Local Storage
• Any powerful technology
comes with the danger of
people abusing it for
darker purposes.
• E.g. EverCookie, exploit
all kind of techniques,
including local storage, to
store information of a
user on their computer
even when cookies are
turned off.

31. Lior Zamir
LiorZ@hpe.com
https://il.linkedin.com/in/lzamir

32. HTML5 is here to stay!