核心是利用beforeunload、pagehide和visibilitychange事件同步保存可序列化变量至localstorage/sessionstorage，避免异步操作；推荐组合使用以覆盖各类退出场景，并在domcontentloaded时恢复。

页面关闭前保存变量，核心是利用浏览器提供的生命周期事件，在用户即将离开页面时把数据存到持久化位置，比如 localStorage、sessionStorage 或发送到服务器。直接靠 JS 变量本身无法跨页面保留，必须主动“落地”。

用 beforeunload 事件触发保存逻辑

这是最常用的方式，适用于用户点击关闭标签页、刷新、输入新 URL 等场景。注意：该事件中不能执行异步操作（如 fetch），且浏览器限制弹窗和复杂交互，适合同步写入本地存储。

• 监听 beforeunload，在事件处理函数里调用 localStorage.setItem() 或 sessionStorage.setItem()
• 避免在该事件里做耗时或依赖网络的操作，否则可能被浏览器忽略或中断
• 示例：不推荐 在这里发 AJAX；推荐 只做本地存储

用 visibilitychange 或 pagehide 做更稳妥的补充

beforeunload 在某些情况（如安卓 Chrome 后台切换）可能不触发。pagehide 更可靠，支持大多数现代浏览器；visibilitychange 可捕获页面失焦（如切到其他标签），适合保存草稿类数据。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• pagehide 事件在页面卸载前触发，且支持 event.persisted 判断是否进入 bfcache，可区分“真关闭”和“暂存”
• visibilitychange 适合自动保存表单输入、滚动位置等，响应更快，但不保证页面一定关闭
• 建议组合使用：beforeunload + pagehide 覆盖更多退出路径

保存哪些变量？怎么组织数据结构？

不是所有变量都需要保存。优先保存用户显式操作产生的状态，比如表单内容、筛选条件、当前页码、折叠状态等。避免保存 DOM 引用、函数、未序列化的对象。

• 只保存可序列化的值（字符串、数字、布尔、数组、扁平对象），用 JSON.stringify() 存，JSON.parse() 取
• 给每个保存项加命名空间前缀，避免 key 冲突，例如 "editor-draft-123" 或 "user-settings-v2"
• 考虑设置过期时间（手动存 timestamp），或在页面加载时校验数据有效性，防止读取陈旧/损坏数据

页面重新打开时恢复变量

保存只是第一步，恢复同样重要。通常在页面初始化阶段（如 DOMContentLoaded 或组件 mounted 时）读取并还原。

• 从 localStorage 或 sessionStorage 中按 key 读取，JSON.parse() 转回对象
• 恢复前做存在性判断和格式校验，避免因存储损坏导致脚本报错
• 对表单控件，用 value、checked、selectedIndex 等属性赋值；对 UI 状态，触发对应更新逻辑

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南