Что нужно добавить или изменить в коде , чтобы данные после отправки не просто изменялись , а добавлялись новые

Question

Есть такой код, пишу данные в форму, нажимаю на кнопку и данные появляются на второй странице, но проблема в том, когда я возвращаюсь и пишу новые данные в форму, то после отправки на второй странице не появляются новые данные рядом со старыми, а просто старые данные изменяются на новые. Подскажите пожалуйста, что нужно добавить или изменить в коде что бы новые данные начали появляться рядом со старыми?

Первая страница

   <fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
        <form action="myforming.html">
        <legend>Sign Up Form</legend>
        <label>Email:<br />
        <input type="text" name="email" id="email"/></label><br />
        <label>Password<br />
        <input type="text" name="password" id="password"/></label><br>
        <label>Mobile:<br />
        <input type="text" name="mobile" id="mobile"/></label><br />
        <label>Telephone:<br />
        <input type="text" name="telephone" id="telephone"/></label><br> 
        <input type="submit" value="Submit" onclick="getData()">
    </form>
    </fieldset>

    <script>
    function getData()
{
    //gettting the values
    var email = document.getElementById("email").value;
    var password= document.getElementById("password").value; 
    var telephone= document.getElementById("telephone").value; 
    var mobile= document.getElementById("mobile").value; 
    //saving the values in local storage
    localStorage.setItem("txtValue", email);
    localStorage.setItem("txtValue1", password);
    localStorage.setItem("txtValue2", mobile);
    localStorage.setItem("txtValue3", telephone);   
}
   </script>

Вторая страница


        The Email is equal to: <span id="data"> Email</span><br> 
        The Password is equal to <span id="data1"> Password</span><br>
        The Mobile is equal to <span id="data2"> Mobile</span><br>
        The Telephone is equal to <span id="data3"> Telephone</span><br>

    <script>
document.getElementById("data").innerHTML=localStorage.getItem("txtValue");
document.getElementById("data1").innerHTML=localStorage.getItem("txtValue1");
document.getElementById("data2").innerHTML=localStorage.getItem("txtValue2");
document.getElementById("data3").innerHTML=localStorage.getItem("txtValue3");
    </script>

Answer 1

Вы каждый раз перезаписываете переменные, которые потом отрисовываете.

Воспользуйтесь массивом, для хранения списка

  // Вытаскиваем в переменную текущий список
  const listForm = JSON.parse(localStorage.getItem('list') ?? '[]');
  function getData() {
    const email = document.getElementById("email").value;
    const password= document.getElementById("password").value;
    const telephone= document.getElementById("telephone").value;
    const mobile= document.getElementById("mobile").value;
    // Добавляем значение
    listForm.push({ email, password, telephone, mobile })
    // Сохраняем в локальном хранилище
    localStorage.setItem("list", JSON.stringify(listForm));
  }

На другой странице

// Вытаскиваем значения из хранилища
const list = JSON.parse(localStorage.getItem('list'));
// Собираем все значения в строку для отрисовки и записываем в нужный контейнер
document.getElementById('cont').innerHTML = list.reduce((acc, it) => {
  return acc += `The Email is equal to: <span id="data">${it.email}</span><br>
    The Password is equal to <span id="data1">${it.password}</span><br>
    The Mobile is equal to <span id="data2">${it.mobile}</span><br>
    The Telephone is equal to <span id="data3">${it.telephone}</span><br>`
}, '');

UPD

Можно немного упростить сбор данных из формы

  // Где myForm это id формы
  const formElement = document.getElementById('myForm');

  function getData() {
    const form = new FormData(formElement);
    const addedData = {};
    for (let [key, value] of form) addedData[key] = value;
    listForm.push(addedData);
    localStorage.setItem("list", JSON.stringify(listForm));
  });

Answer 2

Ваш текущий код заменяет старые значения на новые, потому что при каждом выполнении он устанавливает значения в localStorage, заменяя тем самым предыдущие. Вам нужно будет сохранять данные в массиве, а затем добавить каждый набор данных на страницу.

function getData() {
    //getting the values
    var email = document.getElementById("email").value;
    var password= document.getElementById("password").value; 
    var telephone= document.getElementById("telephone").value; 
    var mobile= document.getElementById("mobile").value; 
    //saving the values in local storage
    var users = JSON.parse(localStorage.getItem('users')) || [];
    users.push({ email, password, telephone, mobile });
    localStorage.setItem("users", JSON.stringify(users));   
}

На второй странице:

window.onload = function() {
    var users = JSON.parse(localStorage.getItem('users')) || [];
    var dataField = document.getElementById('data-field');
  
    users.forEach(function(user) {
         var paragraph = document.createElement('p');
         paragraph.innerHTML = 'Email: ' + user.email + ', password: ' + user.password+ ', telephone: ' + user.telephone + ', mobile: '+user.mobile;
         dataField.appendChild(paragraph);
    });
}

БЛОГ НА HUSL

Что нужно добавить или изменить в коде , чтобы данные после отправки не просто изменялись , а добавлялись новые

Ответы (2 шт):