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

如何解决节点JS中页面重新加载后刷新复选框值

“我正在使用 Node 作为后端创建 Todo 列表。添加每个新项目后，还会在它们前面生成一个复选框，因此我可以应用“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>

节点JS -

const items = [];

app.post("/",function(req,res){

let item = req.body.newItem;
    items.push(item);
    res.redirect("/");

});

解决方法

答案涉及大量代码，因此我将提供一组可以帮助您解决问题的步骤。

您需要更改数据方案。目前看起来您只是将字符串存储在一组项目中。您需要将其更改为对象数组。每个对象都应具有字段 task 和 done。这样你就可以知道哪个任务完成了。
```
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。
更改模板以反映对数据的更改。例如而不是 <%= newListItems[i] %> 做 <%= newListItems[i].name %> 并添加逻辑以根据 done 属性呈现选中的复选框。

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