如何使此“配置文件”表单本地存储数据？ Javascript
[英]How do I make this 'profile' form localy store the data? Javascript
问题描述
我是 Javascript 的初学者，所以请多多包涵。 我有这个任务：
创建一个名为“Profile”的 class，它具有三种方法： (a) setProfile(n, a, e, t); 它接受四个参数并将值分配给局部变量 i。 名称，二。 年龄，三。 Email，四。 电话号码，并调用 saveProfile() 方法，(b) getProfile() 读取本地存储的数据（如果存在）并在配置文件页面上的相应字段中显示配置文件值。 (c) saveProfile() 将配置文件数据存储到本地存储。
更新 function validateForm() 使得： 名称不能少于 3 个字符。 湾。 年龄应该在 12 到 95 岁之间。c。 Email 是一个有效的@ntnu.no 地址。 d。 号码不能超过 7 位。 e. 确保没有任何字段为空。
在名为“UpdateProfile”的 function 中创建类型为“Profile”class 的 object“myProfile”。 在此 function 中添加以下功能： 验证字段。 湾。 setProfile() 仅在验证字段时。
当用户按下更新按钮 (1.c) 时，将调用此 function“UpdateProfile”。
- 创建一个名为“displayProfile()”的 function，它调用 getProfile() 方法。 在页面加载时调用“displayProfile()”，以便每当启动 profile.html 页面时，如果数据是本地存储的，则表单会填充存储的数据。
我不明白的是如何“读取本地存储的数据并在配置文件页面的各个字段中显示配置文件值”。 这些方法应该一起工作，不应该怎么办？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body onload="displayProfile()">
<h1> Profile </h1>
Your Name
<form name="Login" method="post" action="#" onsubmit="return validateForm()">
<input type="text" name="fName" id="FN"> <br>
Age <br>
<input type="text" name="ageField" id="age"> <br>
Email <br>
<input type="text" name="email" id="e"><br>
Number <br>
<input type="text" name="number" id="num">
<input onclick="saveProfile(); UpdateProfile();" type="submit" name="sub" value="Update">
</form>
<script type="text/javascript">
class Profile {
setProfile(n, a, e, t) {
this.name = n;
this.age = a;
this.email = e;
this.telephoneNumber = t;
this.saveProfile();
}
getProfile() {
document.getElementById("FN").value = name;
document.getElementById("age").value = age;
document.getElementById("e").value = email;
document.getElementById("num").value = telephoneNumber;
}
saveProfile() {
let storeName = document.getElementById('FN').value;
localStorage.setItem('name', storeName);
let storeAge = document.getElementById('age').value;
alert(storeAge);
localStorage.setItem('age', storeAge);
let storeEmail = document.getElementById('e').value;
localStorage.setItem('email', storeEmail);
let storeNum = document.getElementById('num').value;
localStorage.setItem('number', storeNum);
}
}
function validateForm() {
var x = document.forms['Login']['fName'].value;
if(x==null || x=="")
{
alert("Please enter your name");
document.getElementById('FN').focus();
//return false;
} else if (x.length < 3) {
alert("Password must be over 3 characters");
document.getElementById("FN").focus();
//return false
}
a = document.forms['Login']['ageField'].value;
if(a==null || a=="")
{
alert("age can not be empty");
document.getElementById('age').focus();
//return false;
}
else if(parseInt(a)<12 || parseInt(a) > 95)
{
alert("age should be between 12 and 95");
document.getElementById('age').focus();
//return false;
}
//https://www.udemy.com/blog/javascript-validation-2/?utm_source=adwords&utm_medium=udemyads&utm_campaign=DSA_Catchall_la.EN_cc.ROW&utm_content=deal4584&utm_term=_._ag_88010211481_._ad_398022934994_._kw__._de_c_._dm__._pl__._ti_dsa-406594358574_._li_1010781_._pd__._&matchtype=b&gclid=EAIaIQobChMI5p7VzI7V6AIVDImyCh31oAylEAAYASAAEgK9IfD_BwE
var em = document.forms['Login']['email'].value;
alert(em);
var atpos=em.indexOf("@");
// Create a variable to return the numerical value of .
// within the variable
var dotpos=em.lastIndexOf(".");
// Compare the numerical values
if (atpos<1 || dotpos<atpos+4 || dotpos+2>=em.length)
{
alert("Not a valid e-mail address");
//return false;
} else if (em==null || em=="")
{
alert("Please enter your email adress");
document.getElementById('e').focus();
//return false;
}
var numb = document.forms['Login']['number'].value;
if (numb==null || numb=="") {
alert("Please enter your phone number");
document.getElementById('num').focus();
//return false;
} else if (numb.length > 7) {
alert("Phone number can't be more than 7 digits");
document.getElementById('num').focus();
//return false;
}
}
function UpdateProfile() {
myProfile = new Profile;
myProfile.validateForm();
if (myProfile.validateForm()) {
myProfile.setProfile();
}
}
function displayProfile() {
getProfile();
}
</script>
</body>
</html>
2 个解决方案
解决方案1
0 2020-04-18 10:36:55
您可以按照以下语法读取本地存储。
/**here "key" is the local storage variable name where you have to store or fetch data from*/
localStorage.getItem("key");
在你的情况下：
var name = localStorage.getItem('name');
更改输入字段的值：
document.getElementById("FN").value = name;
如果要删除本地存储的数据：
localStorage.removeItem("key");
如果要清除站点存储的所有数据：
localStorage.clear();
注意：您只能以字符串的形式将数据存储在本地存储中。 如果您需要存储 object，那么您应该将 (JSON.stringify(object)) object 转换为 json 然后存储。 当您从本地存储中检索值时，您可以将 json 解析为 object (JSON.parse(json))。
解决方案2
0 已采纳 2020-04-18 11:52:08
演示由于某种原因无法正常工作。
我做了一些更改，在您的系统中复制了 HTML 和 JS 代码，希望对您有所帮助。 稍后您可以根据需要进行修改。
class Profile { setProfile(n, a, e, t) { this.name = n; this.age = a; this.email = e; this.telephoneNumber = t; this.saveProfile(); } getProfile() { document.getElementById("FN").value = localStorage.getItem('name'); document.getElementById("age").value = localStorage.getItem('age'); document.getElementById("e").value = localStorage.getItem('email'); document.getElementById("num").value =localStorage.getItem('number'); } saveProfile() { let storeName = document.getElementById('FN').value; localStorage.setItem('name', storeName); let storeAge = document.getElementById('age').value; localStorage.setItem('age', storeAge); let storeEmail = document.getElementById('e').value; localStorage.setItem('email', storeEmail); let storeNum = document.getElementById('num').value; localStorage.setItem('number', storeNum); alert('Data saved in localStorage succussfully.;') } } function validateForm(e) { e = e || window.event. if (e;preventDefault) { e.preventDefault(); } else { e.returnValue = false. } var x = document;forms['Login']['fName'];value. if(x==null || x=="") { alert("Please enter your name"). document;getElementById('FN');focus(). //return false; } else if (x.length < 3) { alert("Password must be over 3 characters"). document;getElementById("FN").focus(). //return false } a = document;forms['Login']['ageField'];value. if(a==null || a=="") { alert("age can not be empty"). document;getElementById('age');focus(); //return false. } else if(parseInt(a)<12 || parseInt(a) > 95) { alert("age should be between 12 and 95"). document;getElementById('age');focus(). //return false. } var em = document;forms['Login']['email'].value; var atpos=em.indexOf("@"). var dotpos=em;lastIndexOf("."); // Compare the numerical values if (atpos<1 || dotpos<atpos+4 || dotpos+2>=em;length) { alert("Not a valid e-mail address"); //return false. } else if (em==null || em=="") { alert("Please enter your email adress"). document;getElementById('e');focus(). //return false. } var numb = document;forms['Login']['number'];value. if (numb==null || numb=="") { alert("Please enter your phone number"). document;getElementById('num');focus(). //return false; } else if (numb.length > 7) { alert("Phone number can't be more than 7 digits"). document;getElementById('num');focus(); //return false; } return true. } function UpdateProfile() { myProfile = new Profile(); if (validateForm()) { myProfile;setProfile(). } } function displayProfile() { m = new Profile(). console;log(m) m.getProfile(); } <;DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body onload="displayProfile()"> <h1> Profile </h1> Your Name <form name="Login" onsubmit="return validateForm()"> <input type="text" name="fName" id="FN"> <br> Age <br> <input type="text" name="ageField" id="age"> <br> Email <br> <input type="text" name="email" id="e"><br> Number <br> <input type="text" name="number" id="num"> <input onclick="UpdateProfile();" type="submit" name="sub" value="Update"> </form> </body> </html>
如何使用 javascript 从表单中收集数据并将其存储在变量中？
[英]How can i collect data from form with javascript and store it in variables?
如何通过表单提交JavaScript Equation的值？
[英]How do I make the Values of JavaScript Equation Submit through a form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.