2

I have a community using an aura template. In that template, I'm saving a value in the session storage and I want to read it in a child lwc component. I'm sure the value is set before the reading but when I tried to read the value I'm getting null.

aura template

init: function(component, event) {
        console.log('####SETEAND0#####');
        sessionStorage.setItem('carlos', '1234');
        console.log(sessionStorage.getItem('carlos'));
    }, 

lwc component

console.log(sessionStorage.getItem('carlos'));

I'm able to see the value in the session storage but not read it in the lwc... enter image description here

Any ideas? What is that LSS:index:Session?

1
  • I bet LWC modifieds the sessionStorage.getItem in some way Mar 6, 2020 at 15:34

2 Answers 2

3

In Aura, different namespaces get their own version of sessionStorage and localStorage. This separation helps avoid security/data leaks across component namespaces. While I can't find specific documentation on the matter, it makes sense that you also can't access Aura storage from LWC, or the other way around, since they technically exist in different partitions. You'll need to pass the value to an Aura wrapper that contains the LWC, then you can communicate via events/attributes data that way. There's a pretty solid barrier between Aura and LWC, except at the Aura/LWC boundary (i.e. when a Aura component directly includes a LWC component).

4
  • We had to make a solution similar to your proposal, and we were not very clear why it did not work in a standard way, now we know what happens, thank you very much for the clarification
    – Pirata21
    Mar 6, 2020 at 16:04
  • I have a similar requirement, on button click open another url and add to session storage. But in my case, session storage (created by LWC) needs to be accessed by a react web app (in another tab). Any suggestions how this can be achieved? Feb 11, 2021 at 4:42
  • 1
    @PranavParakh As stated here, the session storage will be isolated between LWC and an app. However, as long as the LWC has a reference to the other tab that was created (via window.open, presumably), you should be able to use Window.postMessage to communicate, or possibly BroadcastChannel if you don't need Safari support and the React app is on the same domain. You may want to ask a new question with more detail, but using sessionStorage is likely a dead end.
    – sfdcfox
    Feb 11, 2021 at 12:45
  • 1
    @PranavParakh You may also be able to use a Lightning Message Channel, but it's unclear if this mode would be supported between a React app and LWC.
    – sfdcfox
    Feb 11, 2021 at 12:47
0

Just to tack on to @sfdcfox's answer, the easiest way I've found to communicate between Aura and LWC components that are on the same page but not related through a parent-child relationship is communicating through CustomEvents (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) attached to the "document" Javascript object.

Sender:

document.dispatchEvent(new CustomEvent('auramessage', {
   detail : {
      carlos : '1234'
   }
}));

Receiver:

document.addEventListener('auramessage', function(e){
   const carlos = e.detail.carlos;
});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .