javascript - 有没有办法可以将数据从注册表单发送到另一个 HTML 页面?
问题描述
我正在使用普通的前端技术(HTML/CSS/JavaScript)创建一个静态网站。我想通过表单注册一个帐户并传递用户信息(暂时不包括密码)以将其显示在另一个 HTML 页面上。我不仅想将信息传递到个人资料页面,还想保存和存储用户信息。我所有的 JavaScript 代码都是外部的。我使用 id 和 name 属性来链接数据的所需位置。
下面是我的代码片段。
注册.html
<div id="content">
<div class="container">
<div id="firstheading">
<h1>Login</h1>
</div>
<div class="form-login">
<form action="profile.html" method="POST" class="form" id="form" onsubmit="return validate();">
<div class="col">
<label for="email">Email</label>
<input type="email" for="proEmail" id="proEmail1" class="form-control"
placeholder="Professional Email">
<div class="error_msg" id="pemail_err_msg">
</div>
</div>
<div class="col">
<label for="password">Password</label>
<input type="password" for="password" id="passwordLogin" class="form-control"
placeholder="Password">
<div class="error_msg" id="pw_err_msg">
</div>
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Log in</button>
</div>
<p class="form__text">
<a href="#" class="form__link">Forgot your password?</a>
</p>
<p class="form__text">
<a id="linkCreateAccount"
href="file:///C:/Users/sykes/Documents/Personal%20Projects/Consulting%20Website/Signup.html"
class="linkLogin">Create An Account</a>
</p>
</form>
</div>
</div>
<!--End of Container-->
</div>
signupdata.js(在 signup.html 中链接)
<script>
function signupForm() {
var firstname = document.getElementById("firstname");
var lastname = document.getElementById("lastname");
var proEmail = document.getElementById("proEmail");
var schoolEmail = document.getElementById("schoolEmail");
var password = document.getElementById("password");
var password2 = document.getElementById("password2");
if (proEmail == 1 && schoolEmail == 1) {
firstname.style.border = "1px solid #ff8471";
error_message("fn_err_msg", "An account with these email(s) already existed.");
}
else if (password != password2) {
firstname.style.border = "1px solid #ff8471";
error_message("fn_err_msg", "Password Must Match.");
}
else {
if (typeof (localStorage) != "undefined" && proEmail != 1 && schoolEmail != 1) {
localStorage.name = document.getElementById("firstname").value;
localStorage.name = document.getElementById("lastname").value;
localStorage.name = document.getElementById("proEmail").value;
localStorage.name = document.getElementById("schoolEmail").value;
}
}
document.getElementById("form").submit();
}
</script>
setSignUpData.js(在 profile.html 中链接)
<script>
function setData() {
if (typeof (localStorage) != "undefined") {
document.getElementById("firstname").innerHTML = localStorage.name;
document.getElementById("lastname").innerHTML = localStorage.name;
document.getElementById("proEmail").innerHTML = localStorage.name;
document.getElementById("schoolEmail").innerHTML = localStorage.name;
}
}
</script>
profile.html
<div id="content">
<div class="container">
<div id="firstheading">
<h1>Welcome to your Student STEM Website Profile</h1>
</div>
<label for="firstname" id="firstname">First Name: </label><br>
<label for="lastname" id="lastname">Last Name: </label><br>
<label for="biography">Biography</label><br>
<label for="college">Community College or University: </label><br>
<label for="major">Major</label><br>
<label for="proEmail" id="proEmail">Professional Email: </label><br>
<label for="schoolEmail" id="schoolEmail">School Email: </label><br>
<label for="linkedin">LinkedIn Profile</label><br>
<label for="github">Github Profile</label><br>
<label for="resumecv">Resume or CV</label><br>
<label for="phonenumber">Phone Number</label><br>
</div>
<!--End of Container-->
</div>
解决方案
您的脚本中有一些问题:
1.localStorage.name
不是不动产。
不清楚您最初在哪里看到此约定,但它是-type objectwindow.localStorage
的一个实例,(如链接的 MDN 页面所述)默认情况下没有属性。Storage
name
2. 您正在覆盖您放入的值localStorage.name
。
出于争论的目的,假设您可以将数据存储在localStorage.name
其中并让它跨页面持续存在,这似乎是您的理解。当你像这样执行一行时:
localStorage.name = 'hello!';
...您告诉 JavaScript 解释器的是“解释器,请将字符串数据存储hello!
在变量中localStorage.name
”,它会很高兴地做到这一点。这里的问题是您已经告诉口译员一遍又一遍地这样做:
localStorage.name = 'hello!';
localStorage.name = 'goodbye!';
localStorage.name = 'sayonara!';
同样,解释器将愉快地按顺序处理其中的每一个。但是,这三行的最终结果localStorage.name
是现在设置为 string sayonara!
,并且您尝试在其中填充的任何其他内容现在都丢失/覆盖了。
重要的是要记住,解释器(更一般地说,计算机作为一个整体)将完全按照您的指示去做;它无法确定您是否打算单独存储这些变量以供以后使用,除非您明确这样做。
3. Storage
API 需要使用它的 getter/setter 方法。
不幸的是,您不能Storage
以这种方式直接操作对象的属性,并按预期跨域的页面保留此数据(关联的MDN 页面清楚地说明了这一点;您应该查看它)。相反,设置属性需要使用setItem()
方法:
localStorage.setItem('name', 'John Smith');
上面的行将本地存储键的值设置为name
字符串John Smith
。如果我们想稍后返回并检索我们存储在那里的值,我们将引用它的键作为该方法getItem()
的唯一参数:
localStorage.getItem('name'); // returns 'John Smith'
在您的场景中,您将目标元素的innerHTML
orinnerText
属性设置为您存储在此键上的值。
4. 你永远不会触发你的setData()
函数。
因此,您存储的数据localStorage
永远不会被绘制到 DOM 中。向您的界面添加一个触发此功能的按钮,或将其作为您选择的事件侦听器的回调执行。
推荐阅读
- java - bindservice 不会启动服务并且 onserviceconnect 不会调用
- dart - 在 dart 中的 MultipartRequest 中添加授权标头
- batch-file - 从 FTP 删除多个文件
- android - React Native / Android:显示高分辨率图像
- python - Keras:在一个简单的网络中,“一个操作对于梯度没有`None`”
- python - keras model.fit() 提供了 tf.Dataset 对象的可初始化迭代器
- spring - 在 Spring Security 中禁用 CSRF 时获取请求未授权
- recursion - 使用递归查找方案列表中的重复元素
- javascript - 如何在 this.setattribute 的函数中传递参数?
- wpf - 弯曲的 WPF 控件