Question

我正在尝试将数据从一个页面表单传递到另一个页面表单。我不能使用任何服务器端脚本。所以请帮助我这样做。我正在粘贴下面的代码。

第1页代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="number" name="subject" placeholder="Contact No." required />
<input type="text" name="subject" placeholder="Address" required />
<input type="text" name="subject" placeholder="Pin Code" required />
<button id="btnClk">Place your order</button></form>
</body>
</html>

第2页代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="number" name="subject" placeholder="Contact No." required />
<input type="text" name="subject" placeholder="Address" required />
<input type="text" name="subject" placeholder="Pin Code" required />
</body>
</html>

正如您所看到的，第2页代码与第1页相同，我没有写任何东西，因为我不知道如何点缀它。我希望如果用户填写第一页上的表单，其详细信息也会以第二页的形式更新，然后用户将获得确认这些详细信息或进行编辑的选项。请帮助我实现这个结果。

Answer 1

有不同的方法来实现它 -

将数据保存在sessionStorage（第1页）
中
```
sessionStorage.setItem('key', 'value');
```
存储第1页DOM元素的JSON数据

从sessionStorage（第2页）
获取保存的数据
```
var data = sessionStorage.getItem('key');
```
或者在localStorage中保存数据：
```
localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');
```

localStorage中存储的数据会一直存在，直到明确删除。

将第二页设为弹出窗口

var opener = window.opener;
if(opener) {
   var oDom = opener.document;
   var elem = oDom.getElementById("your 1st page element");
}

第一页表格数据作为第二页的查询字符串参数但由于安全原因不可取，除非您使用防篡改查询字符串，查询字符串存在长度限制。

将FORM数据从一个页面传递到另一个页面

1 个答案: