Store objects in HTML5 localStorage

The localStorage property allows you to store objects in HTML5 that is more secure and can store large amounts of data locally.

It’s essential sometimes having stored JavaScript object in HTML5 localStorage. But objects don’t seem to work? Let’s see.

Basically, if you have a look for Apple, Mozilla and Microsoft documentation, you can find that the functionality seems to be limited for handling the string key/value pairs.

As local storage is per origin so, all pages from one origin can store and access the same data and the storage limit is much more like 5MB. The information is never transferred to the server also.

Before HTML5, we stored application data in cookies. But now we can store data as a local storage also. This is more secure and we can store large amounts of data locally without affecting website performance.

And a workaround can be to stringify your object before storing it and then parse it when you retrieve it.

How to Store objects in HTML5?

Have a look at this example:

var obj = { '1': 'John', '2': 'Jane', '3': 'Tim' };

Now, put the object into a storage

localStorage.setItem('obj', JSON.stringify(obj));

Then, retrieve the object from a storage

var resultObj = localStorage.getItem('obj');

console.log('resultObj: ', JSON.parse(resultObj));

Read Also: Make a placeholder for a “select” box

Browser Support:

Most of the browsers supports HTML local storage.

• Chrome >= 4.0
• Internet Explorer/Edge >= 8.0
• Firefoz >= 3.5
• Safari >= 4.0
• Opera >= 11.5