本地存储中的值被替换而不是更新答案

【问题标题】：Value in local storage replaced instead of updated本地存储中的值被替换而不是更新
【发布时间】：2021-05-16 03:48:00
【问题描述】：

我已经创建了这个电话簿网站，它现在存储用户的姓名和电话号码。现在我碰壁了，如果我插入用户数据（姓名和电话号码），它会将其推送到电话簿数组，当我尝试推送另一个用户时，它会替换第一个用户而不是更新数组。

这是我的 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>
    `);
  }
}

【问题讨论】：

您正在将本地存储设置为字符串化对象，您要使用的数组在哪里？
“它把它推送到电话簿数组”在哪里？
让 phoneArray=[100];
在将数组写入 localStorage 之前，必须先将其推送到数组中。目前，您只是将最后一个元素写入 localStorage。这条评论//array of obj 是错误的。它不是obj 的数组。只是obj。
在执行myStorage.setItem("formOutput", JSON.stringify(formOutput)); 之前，您需要读取本地存储，然后对其进行解析，然后将新的formOutput 推送给它，然后执行setItem。

标签： javascript local-storage

【解决方案1】：

当您提交表单时，您只是将本地存储项目替换为新项目，而不是您必须从存储中获取值并将其存储在一个变量中，然后将新值添加到同一个变量并推送那个变量到存储。有些是这样的：

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
        , );

【讨论】：