Javascript 不追加和替换本地存储中的数据

对象正在保存到localstorage中，我希望检索该对象并附加到页面中，而且每次提交新表单时我都要更改密钥名称，因此在第一次提交时，key=key，然后在下一次提交表单时，我希望key=key1等

但是我不知道如何做到这一点，有人能帮我吗

var existingData = JSON.parse(localStorage.getItem("key")) || [];
$('body').append(existingData);
$('form').submit(function() {
var newArray = [];
    $(".add_id2").each(function(){
    newArray.push($(this).val());
});
var newArray2 = [];
    $(".add_id").each(function(){
    newArray2.push($(this).val());
});

var newData = {
  'title': $("#title").val(),
  'ingredients': $("#ingredients").val(),
  'instructions': $("#inst").val(),
  'moreingredients': newArray,
  'moreinstruction': newArray2,
  'img': img,
    };
existingData.push(newData);
localStorage.setItem("key", JSON.stringify(existingData));

---

您可以创建构造函数并使用新关键字调用它…请看一下这个。希望这对你有帮助

示例：-

function formData(title, ingredients, instructions, moreingredients, img) {
    this.title = title;
    this.ingredients = ingredients;
    this.instructions = instructions;
    this.moreingredients = moreingredients;
    this.img = img;
}


var newData = new formData($("#title").val(), $("#ingredients").val(), $("#inst").val(), newArray, newArray2);

---

您好@Przemek，请创建一个codepen演示，这样我就可以检查您到底想要实现什么。您现有的代码有什么问题，它是如何失败的？基本上，如果您在表单保存值到本地存储后提交表单，但是如果我用新值再次输入表单，旧值在那里，而不是新值