Node.js 在节点JS中重新加载页面后刷新复选框值

“我正在使用节点作为后端创建待办事项列表。添加每个新项目后，还会在它们前面生成一个复选框，以便我可以应用”CSS行通过“让用户知道该项已完成或没有用处。但是，当我添加另一个项目时，页面会刷新，并且该复选框未选中，因为我没有将该值存储在任何位置。您能告诉我如何在后端存储该复选框的值吗

HTML-

<div class="box" >  
    <% for (var i=0; i<newListItems.length; i++) { %>
    <div class="item">
        <input type="checkbox" id="checkBox">
        <p> <%= newListItems[i] %> </p>
    </div>
    <% } %>
    <form action="/" method="post" class="item">
        <input class="inputBox" type="text" name="newItem" placeholder="New item" autocomplete="off" required="required"> 
        <button type="submit" name="list" value=<%= listTitle%>> +</button>
    </form>
</div>

---

}))

答案涉及大量代码，因此我将为您提供一组有助于您的案例的步骤

您需要更改数据方案。当前看起来您只是将字符串存储在一个项目数组中。您需要将其更改为对象数组。每个对象都应该有

任务

和

完成

字段。所以你可以知道哪个任务完成了或者没有

app.post("/", function(req, res) {
    let item = req.body.newItem;
    items.push({ name: item, done: false });
    res.redirect("/");
});

下一步将添加一个端点，该端点将把数组项的

done

字段更改为

true

然后在前端，您需要编写一些JS代码，将HTTP请求发送到标记任务已完成的端点。为此，您需要使用AJAX调用，例如NPM包

axios

更改模板以反映对数据的更改。e、 g.代替

执行

，并根据

done

属性添加逻辑以呈现选中复选框

值得一提的是，您不应该将数据存储在内存中，因为一旦处理完成，您将丢失数据。出于学习目的，这是可以的，但在生产中，您应该使用数据库

app.post("/", function(req, res) {
    let item = req.body.newItem;
    items.push({ name: item, done: false });
    res.redirect("/");
});