为什么我的表单元素在 LocalStorage 中保存为单独的 JSON 元素？

Question

我有一个虚拟遛狗预约计划表，任务是将数据保存到localStorage（不允许使用数据库）。到目前为止，我已经设法单独保存元素，但是我现在正在使用 JSON 将输入数据保存为数组。

我的讲师给了我们一个很棒的教程，但是它只解释了硬编码的数组。我已经设法将表单中的数据保存到自己的数组中，但是它将每个元素（名称、地址、数字等）保存在自己的索引中。但是，我希望每个用户的整个表单输入都保存到一个索引中。

bookings - [0]{ booking one }
           [1]{ booking two }
           [2]{ booking three }

我也遇到了旧数据之后没有清除的问题。当然，在最终产品中，我希望数据保留，但是在我制作数组之前我有今天早些时候的旧数据 - 我已经尝试清除缓存和数据仍在显示。

这是我所拥有的：

   $("#submit").click(function () {
 
// prepare
var formData = $("#regForm").serializeArray();
// get all stored as Array []
var bookings = JSON.parse(localStorage.getItem('bookings') || '[]');

for (formData = 0; formData < localStorage.length; formData++) {
// insert and save
    localStorage.setItem("bookings", JSON.stringify([formData]));
}
});

<form id="regForm" name="regForm" onsubmit="return setAction(this)" class="col-sm-6">
  <h3>Book your dog walk now</h3>
  <!-- BOOKING FORM -->
  <div class="row">
    <p>Tell us about yourself first..</p>
  </div>
  <div class="row">
    <input type="text" id="display_fname" placeholder="First Name" name="fname" required>
    <input type="text" id="display_lname" placeholder="Last Name" name="lname" required>
  </div>

  <div class="row">
    <input type="number" id="display_number" onchange="validateContact()" placeholder="Contact Number" name="Number"
      required>
    <input type="email" id="display_email" placeholder="Email Address" name="email">
  </div>

  <div class="row">
    <p>When should we pick your dog up?</p>
  </div>
  <div class="row">
    <input type="date" id="display_sdate" class="datepicker" name="sdate" onchange="checkStartDate()" required>
    <select name="stime" id="stime" required>
      <option value="" selected disabled hidden>Choose a time</option>
    </select>
    <select name="duration" id="display_duration" required>
      <option value="" selected disabled hidden>Duration</option>
      <option value="half an hour">30 mins</option>
      <option value="one hour">1 hour</option>
      <option value="one and a half hours">1.5 hours</option>
      <option value="two hours">2 hours</option>

    </select>
  </div>

  <div class="row">
    <p>Where should we pick up/drop off your dog?</p>
  </div>
  <div class="row">

    <input type="text" id="address" placeholder="Address" name="address" required>
    <input type="text" id="postcode" placeholder="Post Code" name="postcode" required>

  </div>

  <div style="overflow:auto;">
    <div style="float:right;">
      <input id="submit" type="submit" value="Submit">
    </div>
  </div>
</form>

<form id="regForm" name="regForm" onsubmit="return setAction(this)" class="col-sm-6">
  <h3>Book your dog walk now</h3>
  <!-- BOOKING FORM -->
  <div class="row">
    <p>Tell us about yourself first..</p>
  </div>
  <div class="row">
    <input type="text" id="display_fname" placeholder="First Name" name="fname" required>
    <input type="text" id="display_lname" placeholder="Last Name" name="lname" required>
  </div>

  <div class="row">
    <input type="number" id="display_number" onchange="validateContact()" placeholder="Contact Number" name="Number"
      required>
    <input type="email" id="display_email" placeholder="Email Address" name="email">
  </div>

  <div class="row">
    <p>When should we pick your dog up?</p>
  </div>
  <div class="row">
    <input type="date" id="display_sdate" class="datepicker" name="sdate" onchange="checkStartDate()" required>
    <select name="stime" id="stime" required>
      <option value="" selected disabled hidden>Choose a time</option>
    </select>
    <select name="duration" id="display_duration" required>
      <option value="" selected disabled hidden>Duration</option>
      <option value="half an hour">30 mins</option>
      <option value="one hour">1 hour</option>
      <option value="one and a half hours">1.5 hours</option>
      <option value="two hours">2 hours</option>

    </select>
  </div>

  <div class="row">
    <p>Where should we pick up/drop off your dog?</p>
  </div>
  <div class="row">

    <input type="text" id="address" placeholder="Address" name="address" required>
    <input type="text" id="postcode" placeholder="Post Code" name="postcode" required>

  </div>

  <div style="overflow:auto;">
    <div style="float:right;">
      <input id="submit" type="submit" value="Submit">
    </div>
  </div>
</form>

JS（根据回复更新） 代码是替换以前的表单数据而不是将其添加到下一个索引，我认为 for 循环可能是答案？

$("#submit").click(function () {
 
    // prepare
    var formData = $("#regForm").serializeArray();
    // get all stored as Array []
    var bookings = JSON.parse(localStorage.getItem('bookings') || '[]');
    
    for (formData = 0; formData < localStorage.length; formData++) {
    // insert and save
        localStorage.setItem("bookings", JSON.stringify([formData]));
    }
});

Answer 1

很遗憾 localStorage 没有索引键，但是您可以使用这种方法。它将允许您将数组存储在一个键下。解析之后，就可以使用了。

  $("#submit").click(function () {
    // prepare
    const formData = $("#regForm").serializeArray();
    // get all stored as Array []
    const allData = JSON.parse(localStorage.getItem('bookings') || '[]');
    // insert and save
    localStorage.setItem("bookings", JSON.stringify([...allData, formData]));
  });