我如何解決本地存儲和JavaScript問題
[英]how do i solve issue with local storage and javascript
問題描述
我創建了具有相關功能的注冊，以在用戶注冊時保存用戶數據。 我似乎沒有得到什么問題，但是數據沒有保存到本地存儲中。 我應該工作良好，但我不知道問題出在哪里。
javascript文件執行以下操作1）處理有人通過電子郵件復制數據的情況2）將對象保存到傳遞到數組的本地存儲中
var signUpBtn = document.querySelector('#signUp'); var signUpOver = document.querySelector('.signup__overlay'); var signInBtn = document.querySelector('#signIn'); var signInOver = document.querySelector('.signin__overlay'); var fullname = document.querySelector('#name'); var email = document.querySelector('#email'); var password = document.querySelector('#password'); var age = document.querySelector('#age'); var occupation = document.querySelector('#occupation'); var Address = document.querySelector('#address'); var signupSubmitClicked = document.querySelector('#signupClicked'); signupSubmitClicked.addEventListener('click', () => { if (fullname.value=="" || email.value=="" || password.value=="" || age.value=="" || occupation.value=="" || Address.value=="") { alert("incomplete datails, please fill up everything") } else { alert("item created") addUser(fullname, email, password, age, occupation, Address); } }); var fetchUsers = () => { try { var userString = localStorage.getItem('userData'); return JSON.parse(userString); } catch (error) { return []; } }; var saveUser = (users) => { localStorage.setItem('userData', JSON.stringify(users)); }; var addUser = (fullname, email, password, age, occupation, Address) => { var users = fetchUsers(); var user = { fullname, email, password, age, occupation, Address }; var duplicateUsers = users.filter(user => user.email === email); if (duplicateUsers.length === 0) { users.push(user); saveUser(users); return user; } }; /************* signup popup *************/ signUpBtn.addEventListener('click', () => { signUpOver.style.display = 'block'; }); signUpOver.addEventListener('click', () => { if(event.target == signUpOver){ signUpOver.style.display = "none"; } }); /************* signup popup *************/ /************* signin popup *************/ signInBtn.addEventListener('click', () => { signInOver.style.display = 'block'; }); signInOver.addEventListener('click', () => { if(event.target == signInOver){ signInOver.style.display = "none"; } }); /************* signin popup *************/ /** the end */
body { width: 100%; margin: 0; background-color: #F8F9F9; display: flex; flex-direction: column; justify-content: space-around; align-items: center; align-content: center; } #mainPage, #userPage { width: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; align-content: center; } #userPage { display: none; } /******************** overlay ********************/ .signup__overlay { position: fixed; display: none; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.8); z-index: 1; } .signup__content{ position: relative; width: 100%; max-width: 520px; background-color: #ffffff; opacity: 1; margin: 64px auto; padding: 20px; } .signin__overlay { position: fixed; display: none; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0,0,0,0.8); z-index: 1; } .signin__content{ position: relative; width: 100%; max-width: 520px; background-color: #ffffff; opacity: 1; margin: 64px auto; padding: 20px; } /******************** overlay ending ********************/ .headerMain { background-color: #000; color: #fff; width: 100%; margin-bottom: 50px; height: 50px; display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: flex-start; } .headerUser { background-color: #000; color: #fff; width: 100%; margin-bottom: 50px; height: 50px; display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: flex-start; } .upButton { margin-bottom: 20px; } .upButton, .inButton { padding-top: 15px; padding-bottom: 15px; cursor: pointer; width: 100%; max-width: 200px; background-color: #239B56; border: #239B56; color: snow; } label { padding-top: 20px; } label, input { width: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>User system</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="mainPage"> <div class="signup__overlay"> <div class="signup__content"> <form> <label for="name">Full Name</label> <input required type="text" id="name" name="name"> <label for="email">Email</label> <input required type="text" id="email" name="email"> <label for="password">Password</label> <input required type="password" id="password" name="password"> <label for="age">Age</label> <input required type="text" id="age" name="age"> <label for="occupation">Occupation</label> <input required type="text" id="occupation" name="occupation"> <label for="address">Address</label> <input required type="text" id="address" name="address"> <input type="submit" id="signupClicked"> </form> </div> </div> <div class="signin__overlay"> <div class="signin__content"> <form> <label for="email">Email</label> <input required type="text" id="Email" name="email"> <label for="email">Password</label> <input required type="Password" id="Password" name="Password"> <input type="submit" id="signinClicked"> </form> </div> </div> <header class="headerMain">User System</header> <section> <button class="upButton" id="signUp">Sign Up</button> <button class="inButton" id="signIn">Sign In</button> </section> </div> <div id="userPage"> <header class="headerUser">User System</header> <section> </section> </div> <script src="js/index.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2018-04-06 00:33:14
當LocalStorage條目在返回null的開頭為空時，您將無法處理這種情況。 JSON.parse(null); 只是null ，所以fetchUsers返回null ，但是接着繼續
var users = fetchUsers();
// …
var duplicateUsers = users.filter(user => user.email === email);
如果您打開瀏覽器控制台（開發工具） （按F12 ）並讀取此錯誤，則應導致TypeError: users is null 。
相反，默認為[]如下所示：
var fetchUsers = () => {
try {
var userString = localStorage.getItem('userData');
return JSON.parse(userString) || [];
} catch (error) {
return [];
}
};
其他事情：
- 如epascarello所指出的 ，當表單未完全填寫時，您應阻止提交。 您可能需要無條件阻止默認設置並以編程方式提交表單，具體取決於您的需求：
signupSubmitClicked.addEventListener('click', (e) => {
if (fullname.value=="" || email.value=="" || password.value=="" || age.value=="" || occupation.value=="" || Address.value=="") {
alert("incomplete datails, please fill up everything");
e.preventDefault();
} else {
alert("item created");
addUser(fullname, email, password, age, occupation, Address);
}
});
解決方案2
-3 2018-04-06 00:11:49
請參閱MDN文檔Window.localStorage 。 請注意，在使用JSON.stringify將它們存儲到本地存儲之前，必須對所有對象進行分類，然后在讀回它們時可以將它們解析回一個對象。
localStorage.setItem（'myCat'，'Tom'）;
我如何存儲一個數組<divs>在 Javascript 的本地存儲中？</divs>
[英]How do I store an array of <divs> in local storage in Javascript?
如何使用JavaScript在本地存儲中存儲多用復選框值？
[英]How do I store mutilple checkbox values in local storage with javascript?
如何使用 JavaScript 循環並將結果保存在 AMP PAGES 上的本地存儲中
[英]How do I use JavaScript loop and save result in local storage on AMP PAGES
如何創建使用本地存儲的javascript ipad應用程序？
[英]How do I go about creating a javascript ipad app that uses local storage?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.