时间戳

首页 > 解决方案 > 本地存储中的值被替换而不是更新

javascript - 本地存储中的值被替换而不是更新

问题描述

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

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

标签： javascriptlocal-storage

解决方案

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

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

推荐阅读