如何在page2输入上显示page1中的输入值？答案

【问题标题】：how to display the input value in page1 on page2 input?如何在page2输入上显示page1中的输入值？
【发布时间】：2016-05-26 06:19:13
【问题描述】：

如何在page2输入中显示page1中的输入值？ Javascript

<script language="JavaScript">
function showInput() {
    var value =  document.getElementById("user_input").value;  
    document.getElementById('display').value = value;

}
</script>

第 1 页 html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>

    <form>
        <label><b>Enter a Message</b></label>
        <input type="text" name="message" id="user_input">
    </form>

    <input type="submit" onclick="showInput();"><br />
</body>
</html>

第 2 页 html

<html>
<head></head>
<body>
    <label>Your input: </label>
    <p><input id='display'> </p>
</body>
</html>

我需要使用本地存储吗？如何使用它？把这个放在page1中

localStorage.setItem(id, value);

这在第 2 页？

localStorage.getItem(id);

如何在输入中显示值？有人可以给我看一些例子吗？谢谢。

【问题讨论】：

是的，localStorage 将完成这项工作，在第 1 页 localStorage.setItem('id', document.getElementById("user_input").value); 之后在第 2 页 document.getElementById('display').value = localStorage.getItem('id');
我还需要把函数showInput()

标签： javascript jquery html input local-storage

【解决方案1】：

试试这个：

page1.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
    var value =  document.getElementById("user_input").value;   // get value of message
    localStorage.setItem('val',value); // set value of message in local storage
}
</script>
</head>
<body>

    <form action="page2.html" method="post"> // add action and method attributes in form tag
        <label><b>Enter a Message</b></label>
        <input type="text" name="message" id="user_input">
        <input type="submit" onclick="showInput();"><br />
    </form>
</body>
</html>

page2.html

<html>
<head>
<script language="JavaScript">
function showInput() {
    var value = localStorage.getItem('val'); // get value of message from localstorage
    document.getElementById('display').value = value; // set it value to display input
}
</script>
</head>
<body onload="showInput();">
    <label>Your input: </label>
    <p><input id='display'> </p>
</body>
</html>

【讨论】：

它正在工作！非常感谢。 :) 但它只会在我刷新页面后显示值。点击按钮后如何让它直接显示？
但是有2页...page1.html和page2.html在这种情况下不刷新我们怎么办

【解决方案2】：

试试这个

第1页

<script>
   var value =  document.getElementById("user_input").value;
   localStorage.setItem("id",value);
</script>

第2页

<script>
    var value =localStorage.getItem("id");
    document.getElementById('display').value = value;
</script>

【讨论】：