刷新不丢购物车，靠的是服务端记住了，前端记得去问：后端将购物车数据存入 session 并持久化，前端在页面加载时主动请求并渲染，可辅以 localstorage 临时缓存。

页面刷新时购物车状态丢失，不是因为 Session 本身失效，而是前端没做状态同步——JavaScript 无法直接读取服务端 Session，必须靠前后端配合把购物车数据“带回来”。

服务端 Session 要存购物车数据

Session 是服务端机制，浏览器刷新后只要 Cookie（如 connect.sid）还在，Session 就依然有效。关键是你得把购物车内容真正存进 Session，而不是只存在前端内存里。

• 用户添加商品时，用 AJAX 把商品 ID、数量发给后端，后端写入 Session（比如 Express 中 req.session.cart = [...]）
• 确保 Session 配置支持持久化（如使用 redis-store），避免重启服务后 Session 清空
• 不要在 Session 里存大对象或敏感信息，只存必要字段：商品 ID、数量、选中状态等

页面加载时主动拉取购物车

刷新页面后，JS 需主动向后端请求当前 Session 中的购物车数据，再渲染到界面。

Ai Coach Batch Session Summary

批量分析录音转写，输出多维度拓客报告。触发词：录音分析、总结、音频总结、拜访记录总结。当用户提及「分析录音」「看看录音数据」「最近的录音」「通话记录」且意图为批量统计/分析时触发。仅出现「录音」或「拜访」时需结合上下文，若仅查看单条详情则不触发。

下载

• 在 DOMContentLoaded 或组件挂载时发起 GET 请求（如 /api/cart）
• 后端响应应返回结构化数据：{ items: [{ id: '123', qty: 2 }], total: 2 }
• 前端拿到后更新本地状态（如 React 的 useState / Vue 的 reactive），再驱动 UI 重绘

前端可加一层 localStorage 缓存（非必须但实用）

为减少首屏白屏或请求失败时的体验断层，可在保存 Session 的同时，把购物车快照同步到 localStorage。

• 每次成功更新服务端购物车后，也调用 localStorage.setItem('cart', JSON.stringify(data))
• 页面加载时，先尝试从 localStorage 读取并展示（作为临时兜底），再并发请求服务端校准
• 注意：localStorage 只是临时缓存，最终以服务端 Session 数据为准，避免脏数据

别混淆 Session 和前端 sessionStorage

sessionStorage 是纯前端、仅限当前标签页的内存，关闭标签就清空——它和 HTTP Session 完全无关，不能替代服务端 Session。

• 误用 sessionStorage 存购物车 → 切换标签页或刷新后数据消失
• Cookie 用于传输 Session ID，不是存购物车数据的地方（除非你手动加密存，但不推荐）
• 真正可靠的链路是：用户操作 → 后端存 Session → 前端按需读取 → 页面刷新后重新读

核心就一句话：刷新不丢购物车，靠的是服务端记住了，前端记得去问。

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