Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jainam ContractorJainam Contractor 

Fetch localStorage value in Lightning Component in Custom Community page

Hello Geeks,

We are developing a Custom Lightning Community with Guest user access. We have different Custom Community pages where we have placed Lightning Component. On the first page, we allow guest to select some products and when the guest user selects a product to view the details, we want to force him a Login on the Next page.

On the 1st page, we are storing the product information in the localStorage/ sessionStorage but when rendered to login page, i want to fetch the localStorage/ sessionStorage, but when i try to fetch that record it is showing 'null' even though there is a data in the localStorage/ sessionStorage.

Below are the code snippet, i am trying to store in/fetch from localStorage/ sessionStorage

Storing Data: 
var GuestShoppingCart = [];
            //for(var i=0; i<items.length; i++) {
                GuestShoppingCart.push({
                    quantity : quantity,
                    product : component.get("v.product")
                });
            //}
            console.log(GuestShoppingCart);
            sessionStorage.setItem('localCartItems', JSON.stringify(GuestShoppingCart));
            localStorage.setItem('localCartItems', JSON.stringify(GuestShoppingCart));
        }
Fetching Data (In different component on another page): 
var localCart = JSON.parse(localStorage.getItem('localCartItems'));
But the later statement throws null. And I want to use that value to store in the Salesforce CRM custom object.

Can anyone point me where i am making an error. Any help is appreciated.

Thanks,
Jainam Contractor,
Salesforce Developer,
Varasi LLC
Best Answer chosen by Jainam Contractor
Ravi JayaramappaRavi Jayaramappa
@Jainam Locker Service supports localStorage/sessionStorage. The access is scoped to the namespace of the component. What does that mean? A component can only set/get items in localstorage(& sessionStorage) that belong to other components in the same namespace. A component cannot get items in storage that were set by a component from a different namespace.
Here's an example I tried to verify that local storage works across page loads. 
<aura:application >
    <aura:attribute name="productId" type="String" default="N/A"/>
		Hello World! {!v.productId}
    <aura:handler name='init' value="{!this}" action="{!c.initHandler}"/>
    <button onclick="{!c.onpress}">Click me</button>
</aura:application>
({
    initHandler: function(cmp) {
        debugger;
        var productId = localStorage.getItem('localCartItems');
        if (productId) {
	        cmp.set('v.productId', productId);            
        }
    },
	onpress : function(component, event, helper) {
        debugger;
		localStorage.setItem('localCartItems', "Gym Pants");
	}
})
Load the page and click on the button. When you reload the page, you will notice that the productId is successfully fetched from localStorage.

Now to your question: In your example, are both the components belonging to the same namespace and are they both api v40.0 or higher?

 

All Answers

Roarke Lynch 12Roarke Lynch 12
IIRC, access to localStorage and sessionStorage are impacted by LockerService.
Ravi JayaramappaRavi Jayaramappa
@Jainam Locker Service supports localStorage/sessionStorage. The access is scoped to the namespace of the component. What does that mean? A component can only set/get items in localstorage(& sessionStorage) that belong to other components in the same namespace. A component cannot get items in storage that were set by a component from a different namespace.
Here's an example I tried to verify that local storage works across page loads. 
<aura:application >
    <aura:attribute name="productId" type="String" default="N/A"/>
		Hello World! {!v.productId}
    <aura:handler name='init' value="{!this}" action="{!c.initHandler}"/>
    <button onclick="{!c.onpress}">Click me</button>
</aura:application>
({
    initHandler: function(cmp) {
        debugger;
        var productId = localStorage.getItem('localCartItems');
        if (productId) {
	        cmp.set('v.productId', productId);            
        }
    },
	onpress : function(component, event, helper) {
        debugger;
		localStorage.setItem('localCartItems', "Gym Pants");
	}
})
Load the page and click on the button. When you reload the page, you will notice that the productId is successfully fetched from localStorage.

Now to your question: In your example, are both the components belonging to the same namespace and are they both api v40.0 or higher?

 
This was selected as the best answer
Jainam ContractorJainam Contractor
@Ravi:

Thanks for helping on the issue. There was a version issue between my components. One component was of API version 37.0 and a result it was not sending the localStorage to the next component.

I changed the version of the component to API version 42.0 and it worked.

Thanks for the help.

Jainam Contractor