我有一個注冊表單，要求提供 6 個詳細資訊來創建用戶物件，但我只需要其中 2 個詳細資訊供用戶登錄（用戶名和密碼）。我不知道如何只從本地存盤中的一個物件（由 6 個值組成）中獲取這 2 個值，所以我創建了一個單獨的陣列來保存這 2 個必需值（userLogin），并且只將其添加到本地存盤。
在登錄表單中，我試圖查看我的用戶名和密碼輸入是否與存盤的內容匹配，但是我在控制臺中得到“ne”，表明它無法識別匹配項。我已經嘗試了很多方法來做這件事和措辭，但我似乎無法讓它發揮作用。我認為問題在于我實際上并沒有得到我需要的物品，但我并不完全確定。請看一看。
// Sign up page
const login = document.querySelector(".login");
const loginSubmit = document.querySelector(".loginSubmit");
let users = [];
let user = {};
let userLogin = [];
signupForm.addEventListener("submit", (e) => {
e.preventDefault();
user = Object.fromEntries( [...document.querySelectorAll(".signup ul input")].map(e =>[e.name, e.value]));
users.push(user);
userLogin.push(user.username);
userLogin.push(user.password);
localStorage.setItem('UserData', JSON.stringify(userLogin));
console.log(localStorage);
});
// Log in page
const loginForm = document.querySelector(".login-form");
loginForm.addEventListener("submit", (e) => {
let usernameInput = document.querySelector(".lg-username").value;
let passwordInput = document.querySelector(".lg-password").value;
e.preventDefault();
if (localStorage.getItem("UserData")) {
const dataUsername = JSON.parse(localStorage.getItem('UserData', 'username'));
const dataPassword = JSON.parse(localStorage.getItem('UserData', 'password'));
if(usernameInput === dataUsername && passwordInput === dataPassword) {
console.log("ye");
}else{
console.log("ne");
}
}else{
console.log("not regis");
}
console.log(localStorage)
});
html 注冊表單：
<form class="join-form">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required /></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required /></li>
<li><input type="email" name="email" class="email" placeholder="Email Address" required pattern=". @gmail\.com" /></li>
<li><input type="text" name="phone" class="phone" placeholder="Phone Number" required /></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required /></li>
<li><input type="password" name="password" class="password" placeholder="Enter a password" required /></li>
</ul>
<input type="submit" class="signupSubmit">
</form>
html登錄表單：
<form class="login-form">
<ul>
<li><input type="text" name="username" class="lg-username" placeholder="Username" required></li>
<li><input type="password" name="password" class="lg-password" placeholder="Password" required></li>
</ul>
<input type="submit" class="loginSubmit">
</form>
uj5u.com熱心網友回復：
你的答案幾乎是正確的。
舉個例子：
localStorage.setItem('UserData', JSON.stringify(['test-username', 'test-pw']));
這會將一個陣列設定為 localstorage，其鍵為“UserData”。
我們可以得到這樣的值。
const [username, password] = JSON.parse(localStorage.getItem('UserData'));
uj5u.com熱心網友回復：
我無法完全弄清楚我想要這樣做的方式，但是我沒有在本地存盤的串列中找到一個專案，而是讓它在本地存盤中搜索字串并查看它是否與用戶輸入匹配。像這樣：
// Sign up page; stores user input
const login = document.querySelector(".login");
const loginSubmit = document.querySelector(".loginSubmit");
let users = [];
let user = {};
let userLogin = [];
signupForm.addEventListener("submit", (e) =>{
e.preventDefault();
user = Object.fromEntries( [...document.querySelectorAll(".signup ul input")].map(e =>[e.name, e.value]));
users.push(user);
userLogin.push(user.username);
userLogin.push(user.password);
signupForm.innerHTML = `Thank you for joining ${user.fullname}!`;
signupForm.style.fontSize = '1.3rem';
signupForm.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
signupForm.style.textAlign = 'center';
signupForm.style.marginTop = '55%';
signupForm.style.fontWeight = 'bold';
localStorage.setItem('UserData', JSON.stringify(userLogin));
console.log(localStorage);
});
// Log in page; matches user input to sign up storage
const loginForm = document.querySelector(".login-form");
loginForm.addEventListener("submit", (e) => {
let usernameInput = document.querySelector(".lg-username").value;
let passwordInput = document.querySelector(".lg-password").value;
let loginData = [];
e.preventDefault();
if (localStorage.getItem("UserData")) {
loginData.push(usernameInput);
loginData.push(passwordInput);
const signupData = JSON.parse(localStorage.getItem('UserData'));
if(signupData.includes(usernameInput && passwordInput)) {
console.log("ye");
}else{
console.log("ne");
}
}else{
console.log("not regis");
}
});
uj5u.com熱心網友回復：
在您更新帖子時，我發現了我的舊登錄代碼
const loginForm = document.forms['login-form'] // use the form parent to refer each form elements
//// ----------- init part on page load. ----------- -----------
loginForm.reset() // clear loginForm to set elements initial values="" (empty)
const
loginDefault = JSON.stringify(Object.fromEntries(new FormData(loginForm).entries()))
, userLogin = JSON.parse( localStorage.getItem('UserData') || loginDefault )
;
Object.entries(userLogin).forEach(([key,val])=>
loginForm[key].value = val) // set user form login values from local storage
//// ----------- ----------- ----------- ----------- -----------
loginForm.onsubmit = evt =>
{
// get user login values:
Object.assign(userLogin, Object.fromEntries(new FormData(loginForm).entries()) )
// savein localstorage:
localStorage.setItem('UserData', JSON.stringify(userLogin))
// control part (only in testing)
console.clear()
console.log( loginForm.username.value, loginForm.user_psw.value ) // access each element by his name
console.log( JSON.stringify( userLogin ) )
evt.preventDefault(); // just for testing disable page submit / and relaod
}
如果你想測驗 css html
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
fieldset {
margin : 2rem auto;
width : 12rem;
}
legend {
font-weight : bold;
font-size : 1.4rem;
margin-bottom : .2rem;
}
fieldset *:not(legend) {
display : block;
float : left;
clear : both;
margin-top : 0.2rem;
}
fieldset label {
margin-top : 0.8em;
font-size : .9rem;
}
fieldset button {
margin-top : 1.4rem;
width : 5.2rem;
}
fieldset button:last-of-type {
clear : none;
float : right;
}
<form name="login-form">
<!-- have a name (or an id) here -->
<fieldset>
<legend> Login form </legend>
<label>Name:</label>
<input type="text" name="username" autocomplete="off"
pattern="[A-Za-z0-9]{1,20}" placeholder="login name"
value="" required>
<label>Password:</label>
<input type="password" name="user_psw"
pattern="[A-Za-z0-9]{1,20}" placeholder="password"
value="">
<!--
<label>4-digit PIN:</label>
<input type="text" name="pinCode" autocomplete="off"
pattern="[0-9]{4}" placeholder="identification code"
value="" required>
-->
<button type="reset">clear</button>
<button type="submit">Log In</button>
</fieldset>
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/497720.html
標籤：javascript 数组 json
上一篇：使用Svelte和Jquery資料表從Promise更新物件會導致UncaughtPromiseparentNodenull