How and when to use HTML5 LocalStorage API?

Recently I had a need to use HTML5 LocalStorage API in my web application project check my reference. The requirement was to save the vertical scroll position of window when a user drills down to low level details by navigating to other view. I didn’t wanted to use cookies because they are sent on every request to the server and I have no need to send this detail to the server as it is just related to client.

Then I was left with LocalStorage and SessionStorage as options. I found that SessionStorage is not maintained when the page reloads and when the browser is closed. So, I opted to use LocalStorage API for this use case and came up with the code below which is a localStorageWrapper module that can be accessed as a module when using RequireJS (a module loader). A client consuming this wrapper is able to set, get, check the existence of a key and clear all the items in client’s localStorage. An item that can be save is made up of a key and a value. This value can be just a string or an javascript object that can be JSON stringified and then saved. This can be seen in the set function of the localStorageWrapper module below.

When using these fancy new HTML5 APIs, one should care about the browser support. You can use CanIuse website to check it. This is a very good resource to check support for everything and anything related to web.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

define([],function($){

‘use strict’;

varlocalStorageWrapper={

/* add data to localStorage */

set:function(key,value){

/* if the value is an object, stringify it to save it in localStorage */

if(typeof value===‘object’){

value=JSON.stringify(value);

}

localStorage.setItem(key,value);

},

/* retrieve data from localStorage object */

get:function(key){

vardata;

if(!this.hasData(key)){

returnfalse;

}

data=localStorage[key];

/* if the data is JSON, try to parse */

try{

returnJSON.parse(data);

}catch(e){

returndata;

}

},

/* check if the item exists and it has data */

hasData:function(key){

return!!localStorage[key]&amp;&amp;!!localStorage[key].length;

},

/* clear all the saved items in client’s localstorage */

clear:function(){

localStorage.clear();

}

};

returnlocalStorageWrapper;

});

To properly provide graceful degradation, you can use Modernizr to check if client supports a particular HTML5 feature.
When using Modernizr, the client code consuming the above module looks like:

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.