如何使此“配置文件”表單本地存儲數據？ 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.