Cookies in LWC Salesforce

by Rijwan Mohmmed
cookies-in-lwc-salesforce

Hello friends, today we will discuss Cookies in LWC Salesforce. We can save data as cookies so if you refresh the page or navigate the data will store in cookies. You can retrieve this cookie. It is the same as saving login data for a particular time.

Here we can Create, Read and Delete the cookies.

Also check this: Shopping Cart in LWC Salesforce

Cookies-in-LWC-Salesforce-Output
Cookies-in-LWC-Salesforce-Output

Key Highlights :

  1. Store the simple data in Cookies.
  2. Store the JSON data in Cookies.
  3. Store the data for a particular time.
  4. We can fetch the cookies by name of the cookie.
  5. We can delete the cookies.

Process & Code:

lWCCookies.Html :

<template>
	<lightning-card variant="Narrow" title="LWC Cookies" icon-name="standard:account">
		<div class="slds-p-horizontal_small" style="text-align:center">
			<lightning-button variant="destructive" label="Delete Cookies" title="Delete Cookies" onclick={deleteCookie}
				class="slds-m-left_x-small">
			</lightning-button>

			<lightning-button variant="success" label="Read Cookies" title="Read Cookies" onclick={getCookie}
				class="slds-m-left_x-small">
			</lightning-button>

			<lightning-button variant="brand" label="Create Cookies" title="Create Cookies" onclick={handleCookieCreate}
				class="slds-m-left_x-small">
			</lightning-button>
		</div>
	</lightning-card>
	<br/>

	<lightning-card variant="Narrow" title="LWC Cookies Output">
		<div class="slds-var-p-around_small">
			<template for:each={cookieVal} for:item="obj">
				<div key={obj.Name}>
					<p>Name : {obj.Name}</p>
					<p>Gender : {obj.Gender}</p>
                    <p>-----------------</p>
				</div>
			</template>
		</div>
	</lightning-card>
</template>

lWCCookies.JS :

import { LightningElement, track } from 'lwc';
export default class LWCCookies extends LightningElement {
    @track cookieName = "techdicerCookie";
    @track cookieVal = [];

    connectedCallback() {
        this.getCookie();
    }

    handleCookieCreate(){
        var value = JSON.stringify([{Name:"First User",Gender:"Male"},{Name:"Second User",Gender:"Female"}]);
        this.createCookie(this.cookieName, value, 1);
    }

    createCookie(name, value, days) {
        var expires;

        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }

        document.cookie = name + "=" + escape(value) + expires + "; path=/";
    }

    getCookie() {
        var tr = this.retriveCookie();
        if(tr != ''){
            this.cookieVal = JSON.parse(tr);
        } else{
            this.cookieVal = [];
        }
        
        console.log(this.cookieVal);
    }

    retriveCookie(){
        var cookieString = "; " + document.cookie;
        var parts = cookieString.split("; " + this.cookieName + "=");
        return decodeURIComponent(parts.pop().split(";").shift());
    }

    deleteCookie() {
       this.createCookie(this.cookieName, '', null);
    }
}

lWCCookies.js-meta.xml :

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Cookies-in-LWC-Salesforce-Output
Cookies-in-LWC-Salesforce1-Output

Reference :

  1. Cookies
What’s your Reaction?
+1
3
+1
0
+1
0
+1
0
+1
0
+1
2

You may also like

Leave a Comment