I'm trying to pass 4 variables from one page to another using jQuery for some reason is not working for me.

This is what I have:

Page 1

//After clicking in the button that submit the form in page 1
$("#undefined-652").click(function () { 
   var first_nameV = $("input[name='first_name']").val();
   var last_nameV = $("input[name='last_name']").val();
   var emailV = $("input[name='email']").val();
   var phoneV = $("input[name='phone']").val();
   
   //to set null in value
   localStorage.setItem("first_name_val","");
   localStorage.setItem("last_name_val","");
   localStorage.setItem("email_val","");
   localStorage.setItem("phone_val","");
   
   //to set value
   localStorage.setItem("first_name_val",first_nameV);
   localStorage.setItem("last_name_val",last_nameV);
   localStorage.setItem("email_val",emailV);
   localStorage.setItem("phone_val",phoneV);
  }); 

Page 2

$( document ).ready(function() {
   var v_first_name = localStorage.getItem("first_name_val");
   var v_last_name = localStorage.getItem("last_name_val");
   var v_email = localStorage.getItem("email_val");
   var v_phone = localStorage.getItem("phone_val");

   $("#first_21").val(v_first_name);
   $("#last_21").val(v_last_name);
   $("#input_22").val(v_email);
   $("#input_23_full").val(v_phone);
});

For some unknown reason, those fields are empty when the page load. Any advice or tip will be appreciated.