Storage

In this article we will learn about Javascript storage. In JS you can store data in various way. They are -

• In App Variables
• Web Storage
• Coockies

In App Variables

Every programming language has a fundamental feature to declare variable. And this is one of the way in Javascript to store variable. Well, everyone who codes JS, must use this way. Without this approach you cannot code JS. This is so fundamental and basic feature that everyone knows about it.

You can declare variable and store your desired data within it. You use either let or var keyword to declare variable. The recommended keyword is let.

var variable1 = "Some Data";
let variable2 = ['Apple', 'Banana'];
var obj = {'name' : "Santanu Bera", 'roll' : 36};

Advantages

• Easy to Use. Easily declare, store and retrive of the data.
• You can store huge amount of data. As long as your RAM can hold. It comes in GB. But if you store that amount of data, say, more than one GB, you might see a little big of slow performance on the browser.

Disadvantages

Data gets lost when you refresh the page. Or if you move from one page to another.

Web Storage

Another modern way to store data is Web Storage. This way you can store data within the browser. It is not document specific. That means when you reload the page, the data is still persisted. This feature is new addition to HTML5. Before HTML5, people have to store their data within coockies. Though coockies has some disadvantage, we will cover about cookies later.

Web Storage is domain specific. It means one domain cannot access another domains local storage. All pages, from one origin, can store and access the same data. It means your data is secure from other domain.

Another great advantage of the localStorage is that you can store upto 5mb of data with it. (And you call it great advantage?). Though the size depends on the browser itself.

Web Storage has two types -

• Local Storage
• Session Storage

Before you use Local Storage, let's check if your browser supports this storage system -

if (typeof(Storage) === "undefined") {
    // Your browser doesn't support Loacal Storage
} else {
    // Congratulation ! you can use Local Storage
}

Local Storage

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Store and Retrive

// Storing Data --
// lastname is the key and Smith is the value.
localStorage.setItem("lastname", "Smith");
// Retrieving Data --
localStorage.getItem('lastname');

You can also do it directly instead of using methods -

localStorage.lastname = "Smith";
localStorage.lastname;

Remove Item

If you want to remove a key from the localStorage you can use removeItem(keyName) -

localStorage.removeItem('lastname');

Another important point to note that, localStorage always stores data in String format. You cannot store object, array, number. Only string. I know it sucks. But hey, you can convert them. (Still, it sucks !)

Check if there is a Key exists in the localStorage

if(localStorage.getItem('key') === null){
	// Doesn't exist
}else{
	// Exist
}

Example

Consider the following simple snippet and reload the page. You can see on every reload, the counter get's incremented by one -

if (localStorage.getItem('counter') === null) {
	localStorage.setItem('counter', "1");
	document.getElementById('example1').innerHTML = "Counter = " + localStorage.getItem('counter');
}else{
	localStorage.setItem('counter', parseInt(localStorage.getItem('counter')) + 1);
	document.getElementById('example1').innerHTML = "Counter = " + localStorage.getItem('counter');
}

Session Storage

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

You can store, retrive or delete a key from the sessionStorage in the same way you do with localStorage. Only difference is that for sessionStorage you will use sessionStorage object. For example -

sessionStorage.setItem('name', 'Santanu Bera');

Coockies

In practice, usage of Cookies are very rare. But they can be useful sometimes.