本文介绍如何在基于 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，真正践行“前端自治”。
