Question

为了更多地了解HTML5 webstorage和Javascript，我正在尝试使用只有“名字”和“姓氏”字段以及提交按钮的表单创建一个简单页面。我想要发生的是让我说输入“John”和“Smith”然后点击回车，然后它会将用户重定向到一个结果页面，该结果页面有两个只读字段，并在第一个名字字段中显示“John” “史密斯”显示在姓氏字段中。我不确定如何将存储的信息拉入只读字段。任何有关这方面的帮助将不胜感激！

代码如下：

webstorage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Storage</title>
</head>
<body>

<form id="nameform" action="result.html">
First name:<br>
<input type="text" id= "firstname" name="firstname">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname">
<br><br>
<input onclick="store()" formmethod="post" type="submit" value="Submit">
</form>

<script type="text/javascript">

function store() {
    var inputFirstName = document.getElementById("firstname");
    var inputLastName = document.getElementById("lastname");
    localStorage.setItem("firstname", inputFirstName.value);
    localStorage.setItem("lastname", inputLastName.value);
}

</body>
</html>

result.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Result</title>
</head>
<body>

<form>
First name:<br>
<input type="text" name="firstname" readonly>
<br>
Last name:<br>
<input type="text" name="lastname" readonly>


</body>
</html>

Answer 1

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Storage</title>
</head>
<body>

<form id="nameform" action ="result.html">
First name:<br>
<input type="text" id= "firstname" name="firstname">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname">
<br><br>

<input onclick="store()" formmethod="post" type="submit" value="Submit"> 
</form>

<script type="text/javascript">

function store() {

    var inputFirstName = document.getElementById("firstname");
    var inputLastName = document.getElementById("lastname");
    localStorage.setItem("firstname", JSON.stringify(inputFirstName.value));
    localStorage.setItem("lastname", JSON.stringify(inputLastName.value));
}
</script>
</body>
</html>

result.html

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Result</title>
</head>
<body>

<form>
First name:<br>
<input type="text" name="firstname" id="firstname" readonly>
<br>
Last name:<br>
<input type="text" name="lastname" id= "lastname" readonly>


</body>
<script type="text/javascript">

var retrivedFirstName = localStorage.getItem('firstname');
var retrivedLastName = localStorage.getItem('lastname');

document.getElementById('firstname').value = JSON.parse(retrivedFirstName);

document.getElementById('lastname').value = JSON.parse(retrivedLastName);

</script>
</html>

使用Javascript读取Webstorage表单数据

1 个答案: