Javascript 保存html输入和以后的获取文件。这是否只能通过使用JS、AJAX和JSON实现

这是我的本地html文件。

<aside id="sidebar">
    <div class="dark">
    <h3> Get a Quote</h3>
    <form class="quote" id="contactForm" method="POST" action="/contact">
    <div>
    <label>Name</label><br>
    <input type="text" name="Name" id="person">
    </div>
    <div>
    <label>Email</label><br>
    <input type="email" name="Email Address" id="email">
    </div>
    <div>
    <label>Message</label><br>
    <textarea placeholder="Message" name="query"></textarea>
    </div>
<input type="submit" value="Send">
</form>
</div>  
</aside>

[
  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },
 { "person": "efg",
     "email": "456@mail.com",
     "message": "bcdefg",
  },
]

  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },

  { "person": "efg",`enter code here`
     "email": "456@mail.com",
     "message": "bcdefg",
  },

因此，每当我单击提交按钮时，文件应自动更新，并将下一个输入保存为数组。
第二部分是，单击按钮时，从最近到旧获取存储输入值。 因此，基本上第二部分将包含一个带有按钮的基本HTML页面。 当我点击按钮时，它应该会显示最近存储的数组组，对于我们来说，从上面的示例中，第一次点击应该会显示

<aside id="sidebar">
    <div class="dark">
    <h3> Get a Quote</h3>
    <form class="quote" id="contactForm" method="POST" action="/contact">
    <div>
    <label>Name</label><br>
    <input type="text" name="Name" id="person">
    </div>
    <div>
    <label>Email</label><br>
    <input type="email" name="Email Address" id="email">
    </div>
    <div>
    <label>Message</label><br>
    <textarea placeholder="Message" name="query"></textarea>
    </div>
<input type="submit" value="Send">
</form>
</div>  
</aside>

[
  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },
 { "person": "efg",
     "email": "456@mail.com",
     "message": "bcdefg",
  },
]

  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },

  { "person": "efg",`enter code here`
     "email": "456@mail.com",
     "message": "bcdefg",
  },

{“人”：“efg”， “电子邮件”：456@mail.com", “消息”：“bcdefg”， },

下一次单击应显示

<aside id="sidebar">
    <div class="dark">
    <h3> Get a Quote</h3>
    <form class="quote" id="contactForm" method="POST" action="/contact">
    <div>
    <label>Name</label><br>
    <input type="text" name="Name" id="person">
    </div>
    <div>
    <label>Email</label><br>
    <input type="email" name="Email Address" id="email">
    </div>
    <div>
    <label>Message</label><br>
    <textarea placeholder="Message" name="query"></textarea>
    </div>
<input type="submit" value="Send">
</form>
</div>  
</aside>

[
  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },
 { "person": "efg",
     "email": "456@mail.com",
     "message": "bcdefg",
  },
]

  { "person": "abc",
     "email": "123@mail.com",
     "message": "abcdefg",
  },

  { "person": "efg",`enter code here`
     "email": "456@mail.com",
     "message": "bcdefg",
  },

所以基本上是按降序排列的。并且希望使用AJAX解决这个问题。 第一部分是使用JS、DOM、JSON保存文件输入。 第二部分是获取文件数据AJAX。 目前，我不想使用PHP、ASP或任何本地浏览器存储或在线数据库。

---

不，这不是老师布置的作业，我是一个单独的学习者，我无法解决。我遇到了许多其他论坛，但我感到困惑。如果您的代码中有任何复杂的命令，请您向我解释代码。（以5岁儿童的角度解释）

假设您已经编写了保存/检索JSON的代码，并且正在将输入值附加到JSON文件中：反转阵列服务器端（在提取时）并将其发送到客户端。第一个元素@client将是服务器文件中的最后一个元素

如果您没有编写任何代码：检查。对于使用nodejs读/写文件，互联网上有很多这样的例子。就像上面说的：这个网站不是为你写代码的

console.log([
{“人”：“abc”，
“电子邮件”：123@mail.com",
“信息”：“abcdefg”，
},
{“人”：“efg”，
“电子邮件”：456@mail.com",
“消息”：“bcdefg”，
},
].reverse（）[0]）阅读SO帖子，了解初学者。虽然这不是一项任务，但本网站并不是为您编写代码的。