首页 > 解决方案 > 全局数组在我的 JavaScript 程序中保留刷新数据

问题描述

我正在尝试制作一个待办事项列表,我想在其中使用表单将新项目添加到列表中。该列表工作正常,但是当我刷新页面时,已经存储在数组中的数据被保留。我不想那样。

我希望在每次刷新时,旧数据都会丢失,新项目会被推送到数组中。但是每次我必须杀死并重新启动服务器时都要这样做。

initial list:
li1
li2
li3

after item addition:
li1
li2
li3
li4
li5

after refresh: (expected)
li1
li2
li3

after refresh: (actual o/p) 
li1
li2
li3
li4
li5

我的代码:

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

var Item = ["Home List","Shop List","Bucket List"];

app.use(bodyParser.urlencoded({extended:true}));

app.set("view engine","ejs");

var options = {
    weekday:"long",
    day:"numeric",
    month:"long"
};

app.get("/", function (req, res) {
  var today = new Date();
  var currentDay = today.toLocaleDateString("en-US",options);
  res.render("lists",{
      day: currentDay,
      newListItem : Item 
});

});

app.post("/",function(req,res){
    Item.push(req.body.newItem);
    res.redirect("/");
});


app.listen(3000, function () {
  console.log("Server on port 3000");
});

标签: javascriptarraysexpressglobal-variablesbackend

解决方案


要做到这一点,需要能够区分/由于用户按下刷新而发出 GET 请求的浏览器和由于/任何其他原因发出 GET 请求的浏览器……而 HTTP确实不是为此而设计的。

“刷新”的意思是“给我这个资源的最新版本”。这并不意味着资源应该响应请求而更改(除非资源类似于旨在显示当前时间的页面……但那里的更改是由时间更改而不是刷新本身触发的)。

如果你想重置数组,然后写一个明确设计的端点来重置它,然后为用户提供一个表单和提交按钮,该按钮发布到该 URL。

app.post("/reset",function(req,res){
    Item = ["Home List","Shop List","Bucket List"]
    res.redirect("/");
});

推荐阅读