+ Start a Discussion
dlCamelotdlCamelot 

Prevent JS/JQuery LocalStorage from clearing after page reload.

I have a single page that needs to preserve/keep a picklist value selected. I do this with LocalStorage. However, selecting the submit button then refreshes/clears the storage.

I want storage to only clear when the page closes. How can I fix this? Thanks!

JS for the VF Page: 
window.onload = confirmRecordType;

$(document).ready(function(){
                var type = localStorage.getItem("recordtype");
                $("[id*='NewUserAccess']").hide();
                $("[id*='Other']").hide();
                $("[id*='Details']").hide();
                $("[id*='Select_Record_Type']").change(function(){
                        if ($(this).val() == "New User Access") {
                                $("[id*='NewUserAccess']").show();
                                $("[id*='Other']").hide();
                                $("[id*='Details']").hide();
                        }  else if ($(this).val() == "Other") {
                                $("[id*='NewUserAccess']").hide();
                                $("[id*='Other']").show();
                                $("[id*='Details']").show();
                        } else if ($(this).val() == "Reporting Request" || $(this).val() == "Integration" || $(this).val() == "Enhancement") {
                                $("[id*='NewUserAccess']").hide();
                                $("[id*='Other']").hide();
                                $("[id*='Details']").show();

                       }    else {
                       };
                        var recordtype = $('[id*=Select_Record_Type]').val();
                        alert("record type stored on change " + recordtype);
                        localStorage.setItem("recordtype", recordtype);
                        var type = localStorage.getItem("recordtype");
                       alert(recordtype);

        } );
});


 function confirmRecordType() {
        alert("loading function");
        var recordtype = localStorage.getItem("recordtype");
        alert("new storage recordtype is" + recordtype );
                if (recordtype == "New User Access") {
                            $("[id*='NewUserAccess']").show();  
                            $("[id*='Other']").hide();
                            $("[id*='Details']").hide();
                }  else if (recordtype == "Other") {
                            $("[id*='NewUserAccess']").hide(); 
                            $("[id*='Other']").show();
                            $("[id*='Details']").show();
                } else if (recordtype == "Reporting Request" || $(this).val() == "Integration" || $(this).val() == "Enhancement") {
                            $("[id*='NewUserAccess']").hide(); 
                            $("[id*='Other']").hide();
                            $("[id*='Details']").show();
                }   else if (recordtype == "null") {
                            $("[id*='NewUserAccess']").hide();  
                            $("[id*='Other']").hide();
                            $("[id*='Details']").hide();
                }
            
} 

window.onbeforeunload = windowClosing;

function windowClosing(event) {
     localStorage.setItem("recordtype", "null");
}

Button for the VF Page: 
<apex:commandbutton action="{!submitRequest}" value="{!$Label.Submit_Request}"  />
Controller function of the button:
public PageReference submitRequest() {
            
           /*Get submitter info through email address entered*/
           list<User> currentUserLst = new List<User>(); 
           currentUserLst = [Select id, firstname, lastName, email from User Where email =: er.Email__c limit 1];   

          if (!currentUserLst.isEmpty()){
            /*If email matches User*/
            try{        
                insert er;
             }
            catch(DmlException ex){

                ApexPages.addMessages(ex);
                PageReference np = new PageReference('/apex/EnhancementRequestv2');
                np.setRedirect(false);
                system.debug('exception');
                return np;
             }
             
         
        }  
        /*If email does not match user */
        ELSE{ 
            
            Util.addPageError('Your email address does not match an account on file.  Please reverify.');
            PageReference np = new PageReference('/apex/EnhancementRequestv2');
            np.setRedirect(false);
            system.debug('exception');
            return np;
        }




 
SandhyaSandhya (Salesforce Developers) 
Hi,

You need to reset the values in window.onbeforeunload 

sample code
window.onbeforeunload = function() {
    localStorage.setItem(name, $('#inputName').val());
    localStorage.setItem(email, $('#inputEmail').val());
    localStorage.setItem(phone, $('#inputPhone').val());
    localStorage.setItem(subject, $('#inputSubject').val());
    localStorage.setItem(detail, $('#inputDetail').val());
    // ...
}
Please refer below link for the same.

http://stackoverflow.com/questions/17591447/how-to-reload-current-page-without-losing-any-form-data

Hope this helps you!

If this helps you, please mark it as solved so that it will be available for others as a proper solution.

Thanks and Regards
Sandhya