[SalesForce] How to handle caching for browser back button in lwc

I am building a multi-step webform for users to fill out for an application. This will be an unauthenticated public page.

I was hoping to get some guidance on which storage to us for caching data between steps.

I want the browsers navigation buttons to maintain functionality of going back and forth through the form.

Right now I have smaller components encapsulated in a parent component. When the user navigates between the pages I save the state to sessionstorage in the browser. I would like to get away from this.

Are there any services/apis provided by lightning components to handle this. Some things I have explored are.

Using session/local storage in the browser to save state between pages. (I opted out of this because I don't want to lose data if users have this blocked.)
Using history state. (Might still use this)
Cache.Session storage in apex. This seems like its only use is for authenticated users

Any direction would be greatly appreciated.

Best Answer

One option is to use lightning-navigation apis, you can store all of your information in the state object of the page object reference. State is stored in the history object of the browser, so going back and forth between pages would allow your data to persist. Your components can then pull from the current page reference on the page and grab the needed data from the state object.

https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

There are probably some good videos online explaining it.

Related Solutions

LWC – How to Handle Click Outside Element

You can't navigate outside your own template. That's one of the security features of LWC's shadow DOM. Instead, create a transparent, fixed div that covers the entire screen area, then react to that, instead:

<template>
  <div class="backdrop" onclick={closeModal}></div>
  <div class="content">... your content here ...</div>
</template>

.backdrop {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  z-index: 1000;
  /* anything else you need here */
}

For a complete example, look at Lightning Strike's Lookup component (written in Aura, but still applicable).

[SalesForce] Disable caching in LWC

Managed to fix it by adding a page reference change handler and forcing a refresh:

AuraContainer.cmp:

<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recordId" type="Id" />
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.onPageReferenceChanged}" />
    <c:sendemail onshowtoast="{!c.handleShowToast}"/>
</aura:component>

AuraContainerController.js:

({
    doInit : function(component, event, helper) {
        console.log(component.get("v.recordId"));
    },
    onPageReferenceChanged: function(cmp, event, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var recordId = myPageRef.state.c__recordId;
        cmp.set("v.recordId", recordId);
        $A.get('e.force:refreshView').fire();
    }
 })

Best Answer

Related Solutions

LWC – How to Handle Click Outside Element

[SalesForce] Disable caching in LWC

Related Topic