LocalStorage Into Deep

 https://javascript.info/localstorage

Basic LocalStorage Full Code Test

PAGE 1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input id="qweInputed" value=""><button onclick="qweclick()">Save Me</button>

    <button onclick="qweRemove()">Remove</button>

    <script>

        function qweclick() {

            var getInput = document.getElementById("qweInputed").value;

            alert(getInput + " success");

            localStorage.setItem("qweStorage", getInput);

        }

        function qweRemove() {

            alert("remove succeed");

            localStorage.removeItem("qweStorage");

        }

    </script>

</body>

</html>

PAGE 2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="loadStorage"></div>

    <script>

        window.onload = alert(localStorage.getItem("qweStorage"));

        window.onload = document.getElementById("loadStorage").innerHTML = localStorage.getItem("qweStorage");

    </script>

</body>

</html>

Basic LocalStorage

 Without reading your code but just your scenario, I would solve by using localStorage. Here's an example, I'll use prompt() for short.

On page1:

window.onload = function() {
   var getInput = prompt("Hey type something here: ");
   localStorage.setItem("storageName",getInput);
}

On page2:

window.onload = alert(localStorage.getItem("storageName"));

You can also use cookies but localStorage allows much more spaces, and they aren't sent back to servers when you request pages.