I'm creating a program which takes user input inside one html page and transfers that text into another html page. Here is my javascript code:

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);
}

The issue I run into is that when the user clicks on the "Update" button on the second html page, the text the user inputted in the first page defaults to "null". For reference, the button in the first html page (transmitting page) calls the fromIndex() function, and the second html page button (the receiving page) calls the transferIndex() function.