Store Multiple Values In LocalStorage API In HTML 5

This blog describes what LocalStorage API in HTML 5 is and how to store multiple values in it.

Introduction

 

WebStorage API is a new API added in HTML5. It facilitates storing the data in key/value pairs in the client-side Browser.

 

It has 2 API.

• sessionStorage maintains a separate storage area for each given origin, which is available for the duration of the page session (as long as the Browser is open, including page reloads and restores).
   
• localStorage does the same thing but persists even when the browser is closed and reopened. 

Here, we will discuss how to store the values in the local storage API. Local storage is secure, large amounts of data can be stored locally, without affecting the Website performance.

 

Using code

 

Before start using localStorage, you need to check whether storage API is available in the Browser or not.

if (typeof(Storage) !== "undefined") {
   // Add code for storing value
} else {
   // Alert to user that storage is not supported
}

The localStorage object stores the data with no expiration date. The data doesn't delete when the Browser is closed. You can store the value in localStorage with the key value pair. It has two methods setItem(key, value) to store the value in the storage object and getItem(key) to retrieve the value from the storage object.

// Store
localStorage.setItem("eName", "Manas");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("eName");

We discussed that we can store single key-value pair, what if we have list employees or an an array to store? We are using JSON.stringify() to convert the object to JSON string and viceversa, it uses JSON.parse() to get the actual object from JSON string, which is stored in localStorage API.

var namesArr = [];
namesArr.push('Manas'); //Add the text 'item1' to nameArr
localStorage.setItem('names', JSON.stringify(namesArr));

To get the Item, one needs to use the code mentioned below.

var storedNames = JSON.parse(localStorage.getItem("names"));

You can remove an item from your localStorage, as shown below.

localStorage.removeItem("eName");

You can get all the keys, values available in localStorage. Each key-name pair is unique for a protocol and domain, regardless of the paths.

function getAllItems()
{
    for (i = 0; i <= localStorage.length-1; i++)
    {
        key = sessionStorage.key(i);
        val = sessionStorage.getItem(key);
    }
}

sessionStorage object is equal to the localStorage object but it stores the data for only one session. The data deletes when the user closes the browser tab. It contains the methods, listed below to store, retrieve, and remove the values:

 

setItem(key, value) 

 

It is used to save to the database key/value.

 

sessionStorage.setItem("eName", "Manas"); //name is the key, Manas is the value.

 

getItem(key)

 

It returns the value by a key.

 

sessionStorage.getItem('eName'); // name is the key.

 

removeItem(key)

 

It deletes an item with a particular key from session storage.

 

sessionStorage.removeItem("eName"); // name is the key.

 

clear()

 

It removes all key/value pairs for the storage object.

 

sessionStorage.clear();

 

Difference between localStorage and Cookie

1. localStorage is an implementation of the storage interface. It stores the data with no expiration date, but the cookie has an expiry.
2. Apart from being an old way of saving the data, Cookies has a limit of 4096 bytes (it varies as per browser) while localStorage is a big 5MB per domain.
3. Cookies values go to the Server when the Postback event occurs but localStorage doesn't go with the request because it is mostly implemented for the client-side.

Conclusion

 

Here, we discussed the storage API in HTML 5. As per your requirement, you need to use any one of them.