P粉986860950 2023-08-03 12:09:44 0 1 196
Translate: 我有一个项目(纯前端Web应用),我使用Node.js路由从后端提供HTML文件:
router.get("/", (req, res) => { res.sendFile(views_dir + "index.html"); }); router.get("/login", (req, res) => { res.sendFile(views_dir + "login.html"); });
并将JS文件作为静态文件进行服务 app.use(express.static(path.join(__dirname, '/frontend'))); 其中/frontend文件夹包含所有前端文件(包括HTML文件)。
现在,我有一个名为model.js的文件(在frontend文件夹中),我正在尝试实现一个单例模式,用于保存所有页面共享的数据(例如用户当前是否已登录):
const Model = (function () { let instance; function init() { let isLogged = false; return { getIsLogged: function () { return isLogged; }, setIsLogged: function (l) { isLogged = l; } } } return { getInstance: function () { if (! instance) { instance = init(); } return instance; } } })();
但是当用户被重定向时,似乎model.js会再次从后端导入,覆盖前一个页面对模型的所有更改。(例如,当用户登录时,我们将模型中的isLogged变量更改为true,并重定向到'/',模型将被刷新和覆盖)
是否有办法只使用JavaScript实现这样的需求?
我认为问题出在res.sendFile(views_dir + "index.html");上,它会将应用程序刷新到新的状态,并且不保存js文件的先前状态,有没有办法避免这种情况?只请求一次js文件?
P粉764785924 采纳为最佳 2023-08-04 00:36:22 1楼
通过@Jared的帮助,我解决了这个问题。
我使用了localStorage来保存模型的当前状态,并在重定向到另一个页面时重新加载它。
最终,我有两个主要的函数:save...和load...,它们从localStorage对象中读取和保存数据。正如Jared在评论中所说,JSON无法对函数进行字符串化,因此我创建了一个名为data的对象,将所有模型的数据(例如isLogged变量)存储在其中。
现在,每当我想要访问模型的数据时,我首先获取它的实例:let model = Model.getInstance();然后我可以从返回的init函数中访问方法。当我请求Model实例时,它首先检查当前实例是否已初始化。如果没有初始化,它调用load_localStorage函数从localStorage中读取数据并保存到data变量中。
在重定向到另一个页面之前,我调用Model实例的saveData函数将数据对象保存到localStorage中,以便重定向后的页面可以读取先前保存的状态。
在HTML文件中,我像这样包含了js文件:。
我相信有更好的解决方案,也许有更易读的代码,但这个方法对我来说已经足够好用了 :)
赞 +0 添加回复