我制作了这个电话簿网站,它现在存储用户的姓名和电话号码。 现在我碰到了一堵墙,如果我插入用户数据(姓名和电话号码),它会将它推送到电话簿数组,当我尝试推送另一个用户时,它会替换第一个用户而不是更新数组。
这是我的 JavaScript 代码:
"use strict";
let myStorage = window.localStorage;
function showOverlay(showButton, showContainer) { // this whole funciton opens up the overlay
const addButton = document.querySelector("." + showButton);
addButton.addEventListener("click", function addSomthing() {
document.querySelector("." + showContainer).style.display = 'block';
});
}
showOverlay("addBtn", "formContainer");
function cancelOverlay(cancelButton, showContainer) { //this dynamic funciton helps with closing overlays after we are done with the event
const removeOverlay = document.querySelector("." + cancelButton);
removeOverlay.addEventListener("click", function removeSomthing() {
document.querySelector("." + showContainer).style.display = 'none';
});
}
cancelOverlay("cancelOverlay", "formContainer");
function inputAndOutput() {
cancelOverlay("submitButton", "formContainer"); //this function helps me close the form window after i click on send
const form = document.getElementById("addForm");
form.addEventListener("submit", (e) => { //this is a submit event when the send button is pressed it makes an object and with the help of JSON it puts it into an array
let formOutput = {
name: document.getElementById("name").value,
phoneNumber: document.getElementById("phone").value
} //end of form
myStorage.setItem("formOutput", JSON.stringify(formOutput)); //array of obj
console.log(myStorage.getItem('formOutput')); //testing
displayOutput();
e.preventDefault(); //prevent the page to reload
} //end of Event
, );
}
inputAndOutput();
let phoneArray = [100];
function displayOutput() {
if (myStorage.getItem('formOutput')) {
let { name, phoneNumber } = JSON.parse(myStorage.getItem('formOutput'));
const output = document.getElementById("outPutContainer");
phoneArray.push(output.innerHTML =
`
<ul>
<li>${name} </li>
<li>${phoneNumber} </li>
</ul>
<br>
`);
}
}
答案 0 :(得分:1)
当您提交表单时,您只是将 localstorage 项目替换为新的项目,而不是您必须从存储中获取值将其存储在一个变量中,然后将新值添加到同一变量中并推送存储的那个变量。 一些这样的:
form.addEventListener("submit", (e) => { //this is a submit event when the send button is pressed it makes an object and with the help of JSON it puts it into an array
let formOutput = {
name: document.getElementById("name").value,
phoneNumber: document.getElementById("phone").value
} //end of form
//HERE
const oldData = JSON.parse(myStorage.getItem("formOutput"));
oldData.push(formOutput); // I believe its an array
myStorage.setItem("formOutput", JSON.stringify(oldData)); //array of obj
console.log(myStorage.getItem('formOutput')); //testing
displayOutput();
e.preventDefault(); //prevent the page to reload
} //end of Event
, );