在前端开发中使用纯JavaScript创建一个单例模式

Question

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文件？

Answer 1

通过@Jared的帮助，我解决了这个问题。

我使用了localStorage来保存模型的当前状态，并在重定向到另一个页面时重新加载它。

const Model = (function () {

    let instance;

    let data = {
        isLogged: false,
    };

    function init_localStorage() {
        save_localStorage();
    }

    function load_localStorage() {
        let model = JSON.parse(localStorage.getItem('Model'));
        if (Object.keys(model).length === 0) {
            init_localStorage();
        }

        data = model;
    }

    function save_localStorage() {
        localStorage.setItem('Model', JSON.stringify(data));
    }

    function init() {
        load_localStorage();

        return {
            getIsLogged: function () {
                return data.isLogged;
            },
            setIsLogged: function (l) {
                data.isLogged = l;
            },

            saveData: function () {
                save_localStorage();
            }
        }
    }

    return {
        getInstance: function () {
            if (! instance) {
                instance = init();
            }
            return instance;
        }
    }
})();

最终，我有两个主要的函数：save...和load...，它们从localStorage对象中读取和保存数据。正如Jared在评论中所说，JSON无法对函数进行字符串化，因此我创建了一个名为data的对象，将所有模型的数据（例如isLogged变量）存储在其中。

现在，每当我想要访问模型的数据时，我首先获取它的实例：let model = Model.getInstance();然后我可以从返回的init函数中访问方法。当我请求Model实例时，它首先检查当前实例是否已初始化。如果没有初始化，它调用load_localStorage函数从localStorage中读取数据并保存到data变量中。

在重定向到另一个页面之前，我调用Model实例的saveData函数将数据对象保存到localStorage中，以便重定向后的页面可以读取先前保存的状态。

在HTML文件中，我像这样包含了js文件：<script src="./../model/model.js"></script>。

我相信有更好的解决方案，也许有更易读的代码，但这个方法对我来说已经足够好用了 :)