SessionStorage适用于单页面PPT在刷新、前进后退或意外关闭后恢复页码，需在脚本初始阶段读取getItem()并设为初始状态，配合setItem()保存、popstate监听及类型转换，注意同域限制与存储容量。
SessionStorage 本身不支持跨标签页或跨窗口同步，所以无法直接用它实现多设备或多窗口间的页码同步。它只在同一个浏览器标签页（或窗口）的生命周期内有效，关闭标签即清空。若你希望“同一台电脑多个窗口”或“不同设备间”看到相同页码，必须配合服务端或 BroadcastChannel / SharedWorker 等前端通信机制。但如果你的目标是：单页面PPT在刷新、前进后退、意外关闭后恢复上次页码，SessionStorage 就非常合适——下面聚焦这个实用场景。
一、用 setItem() 和 getItem() 保存并读取当前页码
在翻页操作（如点击「下一页」按钮）时，把当前页码存入 sessionStorage；页面加载时优先从 sessionStorage 读取， fallback 到第 1 页。
- 存页码：`sessionStorage.setItem('pptPage', String(currentIndex + 1));`（注意转成字符串）
- 读页码：`const savedPage = Number(sessionStorage.getItem('pptPage')) || 1;`
- 建议在渲染前就获取该值，再初始化幻灯片组件或设置 active class
二、监听 popstate 配合 sessionStorage 恢复历史页码
如果 PPT 支持 URL 路由（如 /slide#3），用户点浏览器「返回」时，仅靠 sessionStorage 不会自动更新视图。需结合 history API：
- 翻页时调用 `history.pushState({page: 3}, '', '#3')` 并同步存 sessionStorage
- 监听 `window.addEventListener('popstate', e => { ... })`，从中取出 page 值并更新界面和 sessionStorage
- 这样即使用户手动改 URL 或点返回，页码状态仍一致
三、处理页面意外刷新的关键细节
刷新后 DOM 重绘，必须确保页码恢复逻辑在任何 UI 渲染前执行：
立即学习“前端免费学习笔记（深入）”；
- 不要等 Vue/React 组件 mounted 后再读 —— 应在脚本最开始就 `getItem()` 并设为初始 state
- 若用纯 HTML+JS，可在 `<script>` 中立即执行恢复逻辑，再调用 `renderSlide(savedPage)`</script>
- 注意：`sessionStorage` 在页面崩溃、强制 kill 标签时也可能丢失，如需更强持久性，可降级到 localStorage（但需主动清理）
四、避免常见坑：同域限制与数据类型
SessionStorage 是协议+域名+端口三者完全一致才共享，所以 http:// 和 https:// 之间不互通；localhost:3000 和 localhost:8080 也隔离。
- 存数字别直接 `setItem('key', 5)` —— 它会被自动转成字符串，取出来是 `'5'`，务必用 `Number()` 或 `parseInt()` 转回
- 不要存整个 slide 数组或大对象 —— SessionStorage 容量通常仅 5–10MB，且是字符串存储，JSON.stringify 有开销
- 调试时可打开浏览器开发者工具 → Application → Storage → Session Storage 查看实时内容
不复杂但容易忽略：SessionStorage 是单页应用状态延续的好帮手，适合“本次演示会话”的页码记忆。真要多人协同翻页，就得上 WebSocket 或 Firebase Realtime DB 了。
