通过 JSON 数组/对象循环 HTML 表单数据？答案

【问题标题】：Looping through HTML form data via JSON arrays/objects?通过 JSON 数组/对象循环 HTML 表单数据？
【发布时间】：2020-12-31 21:50:25
【问题描述】：

我已经在这个网站和互联网上搜索了几个小时，之前问了一个问题，这让我至少更进一步。但是我真的很难理解如何将多个数组保存到我的 localStorage .

我可以理解使用硬编码数组的过程，但是当我尝试实现 localStorage 数据时，我不明白该怎么做。

这是我迄今为止尝试过的（在另一个 SO 用户的帮助下）：

$("#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]));
    }
    
});

没有 for 循环也可以正常工作，但是当我用新数据重新提交表单时，它会替换它而不是创建新索引？

基本上，我正在尝试为遛狗创建预约安排程序，我需要能够查看每个预订、修改、删除，当然还可以查看预订（所有客户端 - 没有数据库）。

我应该先初始化我的数组吗？如何处理 for 循环？感谢任何帮助，因为我想学习，但我一直在这几个小时没有运气。

【问题讨论】：

There's no such thing as a "JSON Object"（也不是“JSON 数组”）
好吧..？这就是我所知道的，我对此很陌生。你有什么解决办法吗？
循环没有任何意义。你正在用0 覆盖formData，然后你调用.setItem() localStorage.length 时总是使用相同的键（bookings）并将[ <current value of formData> ] 存储为它的内容。
找到一种以结构化方式（例如数组）存储所有约会的方法。如果您找到了合适的解决方案，则可以将该“事物”（可能是对象数组或的对象）存储在 localStorage 中，只需调用一次 .setItem("bookings", JSON.stringify(<"thing">))
谢谢，我明白了，但我不知道如何实现它，我可以获得一个记录，但是如果我创建一个新记录，它会替换旧记录。我知道我的代码不正确，但我只是想展示我的想法/工作，希望有人能提供帮助。

标签： javascript arrays json local-storage

【解决方案1】：

你可以像下面这样使用。将新值保存在先前存储的变量中的值中，并在最后更新本地存储。

$("#submit").click(function () {

    var formData = $("#regForm").serializeArray();
    var bookings = JSON.parse(localStorage.getItem('bookings') || '[]');
   
    for (formData = 0; formData < localStorage.length; formData++) {
        bookings.push(formData)   
    }
    localStorage.setItem("bookings", JSON.stringify(bookings));
});

【讨论】：

这现在不起作用，我没有做任何更改，但出于某种原因，现在只是给了我一个数字数组？