How to use cookies in Salesforce lightning pages

Question

I created new page from Salesforce community and I have set some component on that page so How i can set set cookies for that page how to access that value in another page?

Answer 1

Generally speaking, it would be easier to use sessionStorage to share data:

window.sessionStorage.setItem('somekey','somevalue');

...

var data = window.sessionStorage.getItem('somekey');

...

If you wish to persist the data longer than a single session, you can also use localStorage instead.

I recommend this method because working with document.cookie is inherently more frustrating than it needs to be, as you have to consider the possibility that other cookies will also exist in the string, so you have to do some parsing. Web Storage resolves this problem by giving each key its own space, so no additional parsing is required.

Answer 2

Example: Create component with below inputs which saves cookies:

<lightning:input aura:id="myData" onchange="{!c.saveCookie}" />
<lightning:input aura:id="otherData" onchange="{!c.saveCookie}" />

Save cookies using below in JS:

saveCookie : function(component, event, helper) {
    document.cookie = "myData="+component.find("myData").get("v.value");
    document.cookie = "otherData="+component.find("otherData").get("v.value");
}

Now, when you want to access them from different component just get by document.cookie

doInit : function(component, event, helper) {
    console.log(document.cookie);
}

You will see below log

myData=Data entered in myData input; otherData=Value in otherData

Its stored as name-value pairs. Further read: https://www.w3schools.com/js/js_cookies.asp

--added based on sfdcfox recommendation--
Session storage and local storage are also other options. However, for choosing one over the other:

localStorage and sessionStorage are perfect for persisting non-sensitive data needed within client scripts between pages (for example: preferences, scores in games). The data stored in localStorage and sessionStorage can easily be read or changed from within the client/browser so should not be relied upon for storage of sensitive or security-related data within applications.

On the positive side cookies can have a degree of protection applied from security risks like Cross-Site Scripting (XSS)/Script injection by setting an HTTP only flag which means modern (supporting) browsers will prevent access to the cookies and values from JavaScript (this will also prevent your own, legitimate, JavaScript from accessing them). This is especially important with authentication cookies, which are used to store a token containing details of the user who is logged on - if you have a copy of that cookie then for all intents and purposes you become that user as far as the web application is concerned, and have the same access to data and functionality the user has.

localStorage vs. sessionStorage vs. Cookies
In terms of capabilities, cookies, sessionStorage, and localStorage only allow you to store strings - it is possible to implicitly convert primitive values when setting (these will need to be converted back to use them as their type after reading) but not Objects or Arrays (it is possible to JSON serialise them to store them using the APIs). Session storage will generally allow you to store any primitives or objects supported by your Server Side language/framework.

This difference between cookies/session/local storage has been taken from https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies