How to Use Local & Cookie Storage using JavaScript modules in Magento 2

Hello Magento Friends,

Today I am going to explain How to Use Local & Cookie Storage using JavaScript modules in Magento 2.

A cookie is a small piece of information stored in a user’s computer when the user is browsing any website via web browsers. After then the user can retrieve those data as and when required. Cookies are generally used to provide a personalized user experience by tracking user’s actions.

Magento 2 provide the functionality to store some public information at browser using local storage or cookie. The store admin can manage the cookie information using javascript modules. Display cookie notification on the store frontend to take consent from the user with FREE Cookie Compliance Extension for Magento 2. 

Steps to Use Local & Cookie Storage using JavaScript modules in Magento 2:

Step 1: First Create a JS file in your extension or theme. To do this, create customcookie.js in 

app\code\Vendor\Extension\view\Frontend\Web\Js\customcookie.js

define([
'jquery',
'uiComponent',
'jquery/jquery-storageapi'
], 
function ($, Component)
{
 	return Component.extend(
        {
		defaults:
                {
			cookieMessages: []
		},
		initialize: function ()
                {
		     this._super();
		     this.cookieMessages = $.cookieStorage.get('mage-string');
		     $.cookieStorage.set('mage-string', '');
		}
	});
});

To use this feature, we have to add both jquery and jquery/jquery-storageapi

Step 2: So now you can get cookie information using

$.cookieStorage.get('mage-string')

Step 3: window.localStorage is also supported to store the information at the local storage

window.localStorage.setItem('myname', 'Vendor');
window.localStorage.getItem('myname');
window.localStorage.removeItem('myname');
window.localStorageclear();

These all are different approaches to store information.

Conclusion:

Hence, with the help of the above code, all are able to. In case you face any difficulty, let me know by mentioning it in the comment section below. Share the article further and stay updated.

You may also like to refer – Magento 2 Cookie Notice (Everything You Need to Know)

Happy Coding!