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

【问题标题】：Checkbox value is refreshed after page reload in node JS在节点 JS 中重新加载页面后刷新复选框值
【发布时间】：2026-02-21 16:20:07
【问题描述】：

“我正在使用 Node 作为后端创建 TODO 列表。添加每个新项目后，还会在它们前面生成一个复选框，因此我可以应用“CSS line-through”让用户知道该项目是否已完成使用。但是当我添加另一个项目时，页面刷新并且该复选框未选中，因为我没有在任何地方存储该值。你能告诉我如何在后端存储该复选框的值吗？

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 -

常量项 = [];

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

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

});

【问题讨论】：

标签： node.js checkbox backend mern

【解决方案1】：

答案涉及大量代码，所以我会给你一组步骤，对你的情况有所帮助。

您需要更改数据方案。目前看起来您只是将字符串存储在一个项目数组中。您需要将其更改为对象数组。每个对象都应该有字段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 属性呈现选中的复选框。

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

【讨论】：