使用Javascript读取Webstorage表单数据

Read Webstorage Form Data with Javascript

本文关键字：表单 数据 Webstorage 读取 Javascript 使用      更新时间：2023-09-26

为了了解更多关于HTML5 webstorage和Javascript的信息，我试图创建一个简单的页面，该页面只有一个"名字"、一个"姓氏"字段和一个提交按钮。我想做的是，假设我输入"John"answers"Smith"，然后点击回车键，它会将用户重定向到一个有两个只读字段的结果页面，"John"显示在名字字段中，"Smith"显示在姓氏字段中。我不知道如何将存储的信息拉入只读字段。如有任何帮助，我们将不胜感激！

代码如下：

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>

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>
相关文章：