如何将提交的数据推送到现有的本地 json 文件中？

Question

我有一个任务，我是 angular 的新手。我必须将来自提交表单的数据推送到我在本地拥有的现有 json 文件中。我的任务是创建一个 angular 应用程序，用户可以在其中创建新任务，然后在不同的页面上查看它们。我尝试使用 http.post，但没有成功，然后出于某种原因，我认为推送可能会起作用，因为 json 是一个数组，但这并没有真正起作用，因为我有点无能为力，哈哈。这是我的 json 文件的样子，要求还说明我必须有一个硬编码，所以它是这样的：{    "tasks": [        {            "name": "Dishes",            "timeToComplete": "10 Minutes",            "description": "Cleaning the dishes",            "itemsNeeded": "Soap, Sponge, Water, Dirty Dishes!"        }    ]}这是具有表单的组件的 html 代码：    <div>    <h3>Create A New Task</h3>    <form (ngSubmit)='onSubmit()'>        <label for='name'>Name of Task:</label>        <input type='text' id='name' placeholder='Name' name='name'     required [(ngModel)]='task.name' />        <br>        <label for='time'>Estimated Time to Complete:</label>        <input type='text' id='time' placeholder='Time' name='timeToComplete' required            [(ngModel)]='task.timeToComplete' />        <br>        <label for='description'>Description of Task:</label>        <input type='text' id='description' placeholder='Description' name='description' required            [(ngModel)]='task.description' />        <br>        <label for='itemsNeeded'>Items to complete task:</label>        <textarea type='text' id='itemsNeeded' placeholder='Items' name='itemsNeeded' required            [(ngModel)]='task.itemsNeeded'></textarea>        <button type='submit'>Submit</button>        <p>If all looks good, go ahead and hit submit!</p>    </form>    <hr>    <div>        <h1>Here's what your task looks like: </h1>        <h3>Your Task: {{ task.name }}</h3>        <h4>Time it will take: </h4><p>{{ task.timeToComplete }}</p>        <h4>Description of what you will be doing: </h4><p>{{ task.description }}</p>        <h4>What you will need, to succeed! </h4><p>{{ task.itemsNeeded }}</p>    </div></div>您在下面看到的代码只是为了查看输入是否正确接线。最后这里是我的组件的 .ts 文件，包括 onSubmit 函数控制台工作并显示从提交返回的对象，所以我知道这是有效的，但是我将如何将它添加到上面的 json 文件中？

Answer 1

您不能直接从简单的 js 中保存 JSON 文件，您需要在nodejs或一些脚本中使用后端服务器来处理请求。

虽然您可以使用 json 将 json 保存到浏览器缓存中。

localStorage.setItem('tasks', JSON.stringify(obj));

并通过使用获得它

var obj = JSON.parse(localStorage.getItem('tasks'));