如何获取一页中输入字段的值并在另一页中打印？

Question

How can I get the value of an input field and print it on another HTML page? Here is my first page:

index.html

<form action="page.html" method="get">
<label>Enter your name:</label><br>
<input type="text" id="firstName" name="firstName"><br>

<input type="submit" name="submit" value="Submit">
</form>

<script>
function myFunction() {
   var name = document.getElementById('firstName').value;
</script>

I want to print that "name" variable on the "page.html". Please help.

Answer 1

I would suggest you to use localStorage, set this value:

localStorage.setItem('nameOfVariable', value);

and after loading other page you can get the value with

localStorage.getItem('nameOfVariable')

In your case:

function setName() {
   var name = document.getElementById('firstName').value;
   localStorage.setItem('name', name);
}

in page.html:

function getName() {
       var name = localStorage.getItem('name');
       // Do something
    }

Answer 2

Try to use localStorage .

var name = document.getElementById('firstName').value;
window.localStorage.setItem('name', name);

And then in page.html page,

Try to get name

const name = window.localStorage.getItem('name')

And then print it.

Answer 3

You need to use the localStorage in the variable name like

document.getElementById("firstName").value = localStorage.name

You can acces the localStorage data from an another page like

document.getElementById("name").innerHTML = localStorage.name;