在纯前端 JavaScript 中实现跨页面持久化的单例模式

本文介绍如何在基于 node.js 后端路由 + 多 html 页面的纯前端架构中，通过 localstorage（或 sessionstorage）持久化单例状态，解决页面跳转导致 javascript 模块重初始化、内存状态丢失的问题。

在传统多页应用（MPA）中，每个 HTML 页面（如 /, /login）由后端独立返回（例如 res.sendFile(“index.html”)），浏览器会完全重新加载整个文档上下文：dom 重建、脚本重新执行、内存变量清空。这意味着即使你用 IIFE 实现了经典的 javaScript 单例模式，每次页面跳转后 model.js 都会被重新解析执行，instance 变量重置，所有运行时状态（如 isLogged = true）瞬间丢失——这并非单例失效，而是浏览器导航机制的固有行为。

要实现“跨页面共享状态”，关键不在于阻止 JS 重载，而在于将关键数据脱离内存、持久化到浏览器存储层。localStorage 和 sessionStorage 是最直接、标准且无需服务端配合的解决方案。

✅ 推荐方案：基于 localStorage 的可持久化单例

以下是一个生产就绪的单例实现，已融合最佳实践（自动加载/保存、类型安全初始化、避免函数序列化）：

// frontend/model.js const Model = (function () {   let instance = null;    // ✅ 纯数据对象（不可含函数、DOM 引用等无法序列化的值）   const defaultData = {     isLogged: false,     userId: null,     username: '',     lastAccessTime: Date.now()   };    function init() {     // 1️⃣ 启动时从 localStorage 加载（若不存在则用默认值）     const saved = localStorage.getItem('Model');     const data = saved ? { ...defaultData, ...JSON.parse(saved) } : { ...defaultData };      // 2️⃣ 返回仅含纯方法的 API 对象（无闭包引用，便于调试）     return {       getIsLogged() {         return data.isLogged;       },       setIsLogged(value) {         data.isLogged = Boolean(value);       },       getUserId() {         return data.userId;       },       setUserId(id) {         data.userId = id;       },       getUsername() {         return data.username;       },       setUsername(name) {         data.username = String(name).trim();       },       // 3️⃣ 显式保存方法（调用方负责时机控制）       save() {         localStorage.setItem('Model', JSON.stringify(data));       },       // 4️⃣ 可选：强制同步刷新（用于调试或紧急恢复）       reload() {         const saved = localStorage.getItem('Model');         if (saved) Object.assign(data, JSON.parse(saved));       }     };   }    return {     getInstance() {       if (!instance) {         instance = init();       }       return instance;     }   }; })();  // ✅ 使用示例（在任意 HTML 页面中） document.addEventListener('DOMContentLoaded', () => {   const model = Model.getInstance();    // 登录成功后更新并保存   function handleLoginSuccess(user) {     model.setIsLogged(true);     model.setUserId(user.id);     model.setUsername(user.name);     model.save(); // ? 关键：立即持久化     window.location.href = '/'; // 跳转   }    // 页面加载时读取最新状态（无需手动 reload）   console.log('当前登录状态:', model.getIsLogged()); // true / false });

⚠️ 重要注意事项

• localStorage vs sessionStorage

  立即学习“Java免费学习笔记（深入）”；

  • localStorage：数据永存（除非手动清除或代码删除），适合长期状态（如用户偏好、登录令牌）。
  • sessionStorage：仅限当前标签页生命周期，关闭标签即销毁。更推荐用于登录态，因其天然契合“一次会话”语义，且避免服务端重启后旧缓存干扰（如问题中提到的 HTML 片段 stale 问题）。只需将 localStorage 替换为 sessionStorage 即可切换。

• 数据序列化限制
  json.Stringify() 会忽略函数、undefined、symbol、循环引用。务必确保 data 对象只包含原始类型（string/number/Boolean/NULL）、数组或扁平对象。复杂状态请先解构再存。

• 保存时机决定一致性
  save() 必须在状态变更后显式调用（如登录后、登出后、配置修改后）。不要依赖 beforeunload（可能被阻塞或失败），而应在业务逻辑关键路径中主动触发。

• 安全性提醒
  localStorage 可被前端脚本任意读写，绝不存储敏感凭证（如密码、原始 Token）。应仅存标识性信息（如 userId, isLogged），敏感操作始终由后端校验。

✅ 进阶建议

• 封装存储层：将 localStorage 操作抽象为 StorageManager 类，支持 fallback（如内存兜底）、加密、过期时间。
• 事件驱动同步：监听 storage 事件，在同域其他标签页中自动响应状态变更（实现多标签页协同）。
• 与现代框架集成：若后续升级为 SPA（如 Vue/React），此单例可无缝转为 Pinia/vuex 或 Context Provider 的底层状态源。

通过将单例的“状态载体”从易失的内存迁移至浏览器持久化存储，你就能在纯前端 MPA 架构中稳健地实现跨页面共享状态——无需改造后端路由，不依赖 cookie 或服务端 Session，真正践行“前端自治”。