Estoy creando un programa que toma la entrada del usuario dentro de una página html y transfiere ese texto a otra página html. Aquí está mi código javascript:

 function fromIndex() { let b = document.getElementById("textbox").value; sessionStorage.setItem("textbox", b) console.log(b) let b2 = document.getElementById("bio").value; sessionStorage.setItem("bio", b2) console.log(b2) } function transferIndex() { var h = document.createElement("p"); let t = document.createTextNode(sessionStorage.getItem("textbox")); h.appendChild(t); document.body.appendChild(h); var h2 = document.createElement("p"); let getIndex2 = document.createTextNode(sessionStorage.getItem("bio")); h2.appendChild(getIndex2); document.body.appendChild(h2); }

El problema con el que me encuentro es que cuando el usuario hace clic en el botón "Actualizar" en la segunda página html, el texto que el usuario ingresó en la primera página por defecto es "nulo". Como referencia, el botón en la primera página html (página de transmisión) llama a la función fromIndex(), y el botón de la segunda página html (la página de recepción) llama a la función transferIndex().