刷新不丢购物车，靠的是服务端记住了，前端记得去问：后端将购物车数据存入 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 中的购物车数据，再渲染到界面。
- 在
DOMContentLoaded或组件挂载时发起 GET 请求（如/api/cart） - 后端响应应返回结构化数据：
{ items: [{ id: '123', qty: 2 }], total: 2 } - 前端拿到后更新本地状态（如 React 的 useState / Vue 的 reactive），再驱动 UI 重绘
前端可加一层 localStorage 缓存（非必须但实用）
为减少首屏白屏或请求失败时的体验断层，可在保存 Session 的同时，把购物车快照同步到 localStorage。
立即学习“Java免费学习笔记（深入）”；
- 每次成功更新服务端购物车后，也调用
localStorage.setItem('cart', JSON.stringify(data)) - 页面加载时，先尝试从 localStorage 读取并展示（作为临时兜底），再并发请求服务端校准
- 注意：localStorage 只是临时缓存，最终以服务端 Session 数据为准，避免脏数据
别混淆 Session 和前端 sessionStorage
sessionStorage 是纯前端、仅限当前标签页的内存，关闭标签就清空——它和 HTTP Session 完全无关，不能替代服务端 Session。
- 误用
sessionStorage存购物车 → 切换标签页或刷新后数据消失 - Cookie 用于传输 Session ID，不是存购物车数据的地方（除非你手动加密存，但不推荐）
- 真正可靠的链路是：用户操作 → 后端存 Session → 前端按需读取 → 页面刷新后重新读
