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

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!

Previous Article

How to add Custom Tab in Customer Account in Magento 2

Next Article

EaseUS - The Best Data Recovery Software? Try it for free!!

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨