JavaScript 中 SessionStorage 怎么在单次会话的订单结算页暂存优惠券与收货地址临时状态-js教程-PHP中文网

sessionstorage适合暂存订单结算页的优惠券和收货地址，自动随标签页关闭清空；需用json.stringify/parse存取纯数据对象；页面加载时主动恢复、操作时实时更新、提交成功后及时清理。

javascript 中 sessionstorage 怎么在单次会话的订单结算页暂存优惠券与收货地址临时状态

SessionStorage 适合在单次会话中暂存订单结算页的优惠券和收货地址，它自动随浏览器标签页关闭而清空，无需手动清理，天然契合“一次结算、一次提交”的场景。

只存可序列化的简单对象（别存函数或 DOM）

SessionStorage 只支持字符串值，所以必须用 JSON.stringify() 存、JSON.parse() 取。优惠券和地址通常都是纯数据对象，例如：

优惠券：{ id: "cpn_123", code: "SAVE20", discount: 20, valid: true }
收货地址：{ name: "张三", phone: "138****1234", province: "广东省", city: "深圳市", detail: "科技园路1号" }

存的时候这样写：

sessionStorage.setItem('checkout_coupon', JSON.stringify(couponObj));
sessionStorage.setItem('checkout_address', JSON.stringify(addressObj));

页面加载时主动恢复状态（避免空白或默认值干扰用户）

用户可能刷新结算页，或从其他页面跳转回来。应在页面初始化阶段立即尝试读取并还原：

先检查 key 是否存在，再解析，防止 JSON.parse 报错
解析失败时忽略，不中断流程（比如旧数据格式变更或被手动清除）

示例代码：

Java Maven Code Review

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

下载

const getCouponFromSession = () => {
  const raw = sessionStorage.getItem('checkout_coupon');
  try {
    return raw ? JSON.parse(raw) : null;
  } catch (e) {
    return null;
  }
};

const getAddressFromSession = () => {
  const raw = sessionStorage.getItem('checkout_address');
  try {
    return raw ? JSON.parse(raw) : null;
  } catch (e) {
    return null;
  }
};

状态变更时实时更新（不是等提交才存）

用户切换优惠券、编辑地址、选择新地址时，应立刻调用 setItem 更新 SessionStorage，确保任何意外刷新后仍保留最新操作：

表单输入框失去焦点（blur）、内容变化（input）时保存地址字段
点击“使用该优惠券”按钮后立即存入 coupon 对象
避免只在“去结算”按钮点击时才存——那样刷新就丢了

注意：不要频繁存整个大对象（如含冗余字段），建议只存必要字段，减小体积、提升性能。

订单提交成功后及时清理（防重复提交或混淆）

一旦支付请求返回成功（如收到 order_id），应主动清除相关 key：

if (response.success) {
  sessionStorage.removeItem('checkout_coupon');
  sessionStorage.removeItem('checkout_address');
  // 跳转到成功页或清空表单
}

如果不清理，用户新开一个结算页（比如另选商品）可能误带上次的地址或券；更严重的是，若用户返回上一页再进结算页，会看到残留状态，引发困惑。

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