前端纯JavaScript单例状态丢失问题及解决方案咨询

解决方案 #

核心原因 #

你猜的没错，页面跳转时浏览器会重新加载整个HTML文档以及关联的JS文件，之前内存里的单例状态会被完全清空——单例只能在当前页面的生命周期内有效，跨页面根本存不住。

纯JS实现跨页共享状态的方案 #

1. 用浏览器持久化存储存状态

这是最直接的方案，把状态存在浏览器自带的存储里，常用的有两种：

• localStorage：持久化存储，除非主动删除，否则数据会一直保留在浏览器中
• sessionStorage：会话级存储，关闭浏览器标签页后数据就会被清除

修改你的model.js，把状态和存储API绑定：

const Model = (function () {
    let isLogged;

    // 初始化时从存储读取状态
    function init() {
        isLogged = localStorage.getItem('isLogged') === 'true';
        
        return {
            getIsLogged: function () {
                return isLogged;
            },
            setIsLogged: function (l) {
                isLogged = l;
                // 同步更新到存储
                localStorage.setItem('isLogged', l.toString());
            }
        }
    }

    return { 
        getInstance: init // 每次页面加载都要从存储读，单例逻辑可以简化
    }
})();

2. 改成单页应用（SPA）避免页面刷新

如果不想用存储，那就彻底避免页面跳转刷新——用前端路由实现无刷新切换页面内容：

• 用history.pushState()修改URL，同时拦截<a>标签的点击事件
• 只加载一个主HTML文件，所有页面内容通过JS动态切换，这样JS只会加载一次，内存里的单例状态就能一直保留

示例前端路由逻辑：

// 拦截所有同域a标签的跳转行为
document.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && link.href.startsWith(window.location.origin)) {
        e.preventDefault();
        const path = new URL(link.href).pathname;
        // 更新浏览器URL
        history.pushState({}, '', path);
        // 动态加载对应页面内容
        loadPageContent(path);
    }
});

// 监听浏览器前进后退按钮
window.addEventListener('popstate', () => {
    loadPageContent(window.location.pathname);
});

// 动态加载页面内容的函数
function loadPageContent(path) {
    // 假设后端提供页面片段的接口，直接返回页面HTML内容
    fetch(`/page-fragments${path === '/' ? '/index' : path}.html`)
        .then(res => res.text())
        .then(html => {
            // 把页面内容插入到主容器里
            document.getElementById('app-container').innerHTML = html;
            // 执行当前页面的初始化逻辑
            initCurrentPage(path);
        });
}

对应的后端可以调整为提供页面片段，或者直接把所有页面内容打包到主HTML文件中。

3. 用Cookie存储状态（适合前后端共享）

如果需要后端也能读取状态（比如后端要验证登录状态），可以用Cookie：

• 设置Cookie时指定path=/，确保所有页面都能访问
• 前端通过document.cookie读写，后端通过req.cookies（需要cookie-parser中间件）获取

示例代码：

const Model = (function () {
    // 读取指定名称的Cookie
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    // 设置Cookie
    function setCookie(name, value, days = 7) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = `expires=${date.toUTCString()}`;
        document.cookie = `${name}=${value}; ${expires}; path=/`;
    }

    let isLogged;

    function init() {
        isLogged = getCookie('isLogged') === 'true';
        
        return {
            getIsLogged: function () {
                return isLogged;
            },
            setIsLogged: function (l) {
                isLogged = l;
                setCookie('isLogged', l.toString());
            }
        }
    }

    return { 
        getInstance: init
    }
})();

关于JS文件仅请求一次的问题 #

浏览器本身会对静态资源做缓存，只要你的后端配置了正确的缓存头（比如Cache-Control: max-age=86400），model.js只会被请求一次，后续页面加载会直接从浏览器缓存读取。但要注意：即使JS从缓存加载，页面刷新后内存里的状态还是会重置，所以核心还是要把状态存在持久化存储里，或者改成SPA避免刷新。

内容的提问来源于stack exchange，提问作者Wahalez