Cookies, Local Storage and Session Storage in JavaScript

Cookies, Local Storage, and Session Storage are web storage in which web application stores the data on the user’s browser. Also, we can say that we can use Cookies, Local Storage, and Session Storage to store the data on the client side.

Before HTML5, we had used Cookie to store data on the client side. Web storage, such as localStorage and sessionStorage, has been introduced in HTML5 and is now easier to use.

Cookies

We set Cookie Name, value, expiry date, and the path to set the cookie in JavaScript. We use “document.cookie” to create, edit and delete the Cookie in JavaScript.

Syntax:

 document.cookie = "cookieName=cookieValue; expires=expiresDate; path=/";

1	document.cookie = "cookieName=cookieValue; expires=expiresDate; path=/";

These are the features of cookies:

Has only 4kb of holding capacity
Supported in both HTML4 and HTML5
Accessible from any window inside the browser
The expiration date can be manually set
Can be stored on both browser and server
Can be sent with API Requests

Local Storage:

Local storage stores the data on the user’s browser. It stores data in key/value pairs. Data is not removed even on browser close and tab change.

Storing data in Local Storage:

We use the following syntax to set the data.

Syntax:

 localStorage.setItem(keyName, value);

1	localStorage.setItem(keyName, value);

Example:

 localStorage.setItem("userName", "John");

1	localStorage.setItem("userName", "John");

The “userName” and its value will be set in the Localstorage of the browser.

Retrieving data from Local Storage:

We use the following syntax to retrieve the data:

Syntax:

 localStorage.getItem("keyName");

1	localStorage.getItem("keyName");

Example to retrieve the local storage value:

 localStorage.setItem("userName", "John"); var user = localStorage.getItem("userName"); console.log(user); //John

localStorage.setItem("userName", "John");

var user = localStorage.getItem("userName");

console.log(user); //John

We can also store JSON objects in Local Storage.

Example:

 var userInfo = { "name": "John", "email": "test@gmail.com" }; localStorage.setItem("userInfo", JSON.stringify(userInfo)); var user = localStorage.getItem("userInfo"); console.log(user); //{"name":"John","email":"test@gmail.com"}

var userInfo = {

"name": "John",

"email": "test@gmail.com"

};

localStorage.setItem("userInfo", JSON.stringify(userInfo));

var user = localStorage.getItem("userInfo");

console.log(user); //{"name":"John","email":"test@gmail.com"}

Removing the data from Local Storage:

We use the following syntax to remove the data from Local Storage:

Syntax:

 localStorage.removeItem("keyName");

1	localStorage.removeItem("keyName");

Example:

 localStorage.setItem("userName", "John"); localStorage.removeItem("userName");

1 2	localStorage.setItem("userName", "John"); localStorage.removeItem("userName");

Also, we can remove all Local Storage data from the browser by the below syntax:

 localStorage.clear();

1	localStorage.clear();

These are the features of Local Storage:

Has 10MB of holding capacity
Supported in HTML5
Accessible from any window inside the browser
No expiration date
It stores on a browser only
Cannot be sent with API Requests

Session Storage:

Session storage stores the data on the user’s browser. Session Storage provides the same properties and methods as Local storage. The difference is that it expires on browser closed but not expiration data of Local Storage.

The syntax for storing data in sessionStorage is as follows:

 sessionStorage.setItem("keyName", "value");

1	sessionStorage.setItem("keyName", "value");

The syntax for retrieving data from sessionStorage is as follows:

 var lastname = sessionStorage.getItem("keyName");

1	var lastname = sessionStorage.getItem("keyName");

The syntax for removing the saved data from sessionStorage is as follows:

 sessionStorage.removeItem("keyName");

1	sessionStorage.removeItem("keyName");

The syntax for removing all saved data from sessionStorage is as follows:

 sessionStorage.clear();

1	sessionStorage.clear();

These are the features of Session Storage:

Has 5MB of holding capacity
Supported in HTML5
Accessible in the same tab inside the browser
Expires on tab close
It stores on a browser only
Can not be sent with API Requests

Difference between Cookies, Local Storage, and Session Storage

	Cookies	Local Storage	Session Storage
Maximum Storage	4kb	10MB	5MB
Supported in HTML5	Supported in both HTML4 and HTML5	Supported in HTML5	Supported in HTML5
Accessible from any window inside the browser	Accessible from any window inside the browser	Accessible from any window inside the browser	Accessible in the same tab inside the browser
Expiration date	The expiration date can be manually set	No expiration date	Expires on tab close
Stored on	Cookies store on both browser and server	Local Storage stores on a browser only	Session Storage stores on a browser only
Can be sent with API Requests	Yes	No	No

Cookies

Syntax:

Local Storage:

Storing data in Local Storage:

Syntax:

Retrieving data from Local Storage:

Syntax:

Removing the data from Local Storage:

Syntax:

Example:

Session Storage:

The syntax for storing data in sessionStorage is as follows:

The syntax for retrieving data from sessionStorage is as follows:

The syntax for removing the saved data from sessionStorage is as follows:

The syntax for removing all saved data from sessionStorage is as follows:

Difference between Cookies, Local Storage, and Session Storage

Leave a Reply Cancel reply