USING HTML5 WEB STORAGE

Kayode Oluwafemi

3 min read

·

Feb 16, 2018

--

2

Listen

Share

Press enter or click to view image in full size

Web storage a provides a way for your web applications to store data locally within the user’s browser.

Prior to HTML5, application data had to be stored in cookies. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data. Cookies are also limited to about 4 KB of data which might not be sufficient to store required data.

With web storage, storage limit is larger than that of cookies with up to 10MB of data per domain and information is never transferred to the server.

Simply put, web storage allows large amounts of application data to be be stored locally, without affecting your web application’s performance.

BROWSER SUPPORT

Latest versions of pretty much all browsers including internet explorer supports the web storage api. Check out this page for more detailed information on browser support for web storage.

TYPES OF WEB STORAGE

There are two main web storage types, which can be used to store data locally:

• Local storage: This stores data with no expiration date. The data in local storage would persist even when the user’s browser is closed and reopened.
• Session storage: This is similar to local storage, except that it stores data for one session only. Once the user’s browser is closed, that session would be lost and the persisted data will be deleted from the browser

JAVASCRIPT DETECTION

Before using web storage, it is probably wise to detect if the browser supports it. The code below checks if the user’s browser supports web storage (this also includes sessionStorage );

if (window.localStorage) {  // Browser supports localStorage  // Good to go} else {  // No localStorage support}

HTML5 WEB STORAGE METHODS

HTML5 web storage comes with a few different JavaScript methods that makes it very easy to work with, let’s look at some:

NB: These methods apply to both web storage types(local storage and session storage).

To set data, we need to do the following:

localStorage.setItem('Name', 'somevalue');

To retrieve some data from storage:

localStorage.getItem('Name');

For removing or deleting some data, we can do this:

localStorage.removeItem('Name');

To clear the entire storage (not just an individual item), we can use:

localStorage.clear();

and to get the number of properties in the storage, we can use:

localStorage.length;

DEMYSTIFYING THE “STRINGS ONLY” ISSUE

With web storage, data can only be stored as string values. This means that when you have an object as data, it will not be stored the right way. Take for example the code below:

var person = {  Name: 'John Doe',  Age: 24,  Gender: 'Male',  Nationality: 'Nigerian'}localStorage.setItem('person', person);localStorage.getItem('person');

Trying the above code out in the browser’s console shows that the data is stored as [object Object] instead of the information contained in the person object.

This problem can be solved by using the native JSON.stringify() and JSON.parse() methods:

var person = {  Name: 'John Doe',  Age: 24,  Gender: 'Male',  Nationality: 'Nigerian'}localStorage.setItem('person', JSON.stringify(person));JSON.parse(localStorage.getItem('person'));

ERROR HANDLING

QUOTA_EXCEEDED_ERR exception will be thrown if the storage limit is exceeded. So it is always better to wrap your code in try/catch blocks to catch an error and alert the user. Wrapping the code in try/catch blocks should look like this:

try {  localStorage.setItem('name', 'somevalue');} catch (e) {  if (e == QUOTA_EXCEEDED_ERR) {    alert('Storage limit exceeded');  }}

Below is a simple example that shows how you can use web storage in your projects.

Cheers guys !!!