如何将方法中的 JSON object data 传递到另一页面

结论

response 已通过 JSON.stringify() 写入 localStorage。在 save_live.html 中用同一个键名 globaly 读取数据，再通过 JSON.parse() 将其还原为 JavaScript 对象即可。

这里不需要使用 $.getJSON("index.html")。$.getJSON() 用于请求 JSON 资源，而 index.html 是 HTML 页面，无法自动返回之前保存在 localStorage 中的数据。

在 save_live.html 中读取并显示

先添加一个用于展示付款详情的元素：

<div id="paid"></div>

页面加载完成后读取并显示数据：

<script>
document.addEventListener("DOMContentLoaded", function () {
  const storedData = window.localStorage.getItem("globaly");
  const paidElement = document.querySelector("#paid");

  if (!storedData) {
    paidElement.textContent = "未找到付款信息。";
    return;
  }

  try {
    const payment = JSON.parse(storedData);

    const referenceElement = document.createElement("p");
    referenceElement.textContent =
      "Payment Reference: " + (payment.paymentReference ?? "");

    const amountElement = document.createElement("p");
    amountElement.textContent =
      "Amount: " + (payment.amount ?? "");

    const transactionElement = document.createElement("p");
    transactionElement.textContent =
      "Transaction ID: " + (payment.transactionId ?? "");

    paidElement.append(
      referenceElement,
      amountElement,
      transactionElement
    );
  } catch (error) {
    console.error("无法解析付款信息：", error);
    paidElement.textContent = "付款信息格式无效。";
  }
});
</script>

代码使用 textContent 显示内容，没有直接拼接未经处理的 HTML，因此付款响应中的内容不会被浏览器当作 HTML 执行。

使用 jQuery 的写法

如果项目已经加载 jQuery，也可以这样写：

<script>
$(document).ready(function () {
  const storedData = window.localStorage.getItem("globaly");

  if (!storedData) {
    $("#paid").text("未找到付款信息。");
    return;
  }

  try {
    const payment = JSON.parse(storedData);

    $("<p>")
      .text("Payment Reference: " + (payment.paymentReference ?? ""))
      .appendTo("#paid");

    $("<p>")
      .text("Amount: " + (payment.amount ?? ""))
      .appendTo("#paid");

    $("<p>")
      .text("Transaction ID: " + (payment.transactionId ?? ""))
      .appendTo("#paid");
  } catch (error) {
    console.error("无法解析付款信息：", error);
    $("#paid").text("付款信息格式无效。");
  }
});
</script>

从结构来看，response 是一个对象，不是对象数组，所以不必使用 $.each() 遍历，直接访问相应属性即可：

payment.paymentReference
payment.amount
payment.transactionId

保存和跳转部分

原来的保存方式基本没有问题：

onSuccess: function (response) {
  window.localStorage.setItem("globaly", JSON.stringify(response));
  window.location.href = "save_live.html";
}

如果付款详情只需要显示一次，可以在成功读取后将它删除：

const storedData = window.localStorage.getItem("globaly");

if (storedData) {
  const payment = JSON.parse(storedData);

  // 显示 payment 中的数据

  window.localStorage.removeItem("globaly");
}

也可以使用 sessionStorage。写法与 localStorage 相同，不过数据通常只保留在当前浏览器标签页的会话中：

// 保存
window.sessionStorage.setItem("globaly", JSON.stringify(response));

// 读取
const storedData = window.sessionStorage.getItem("globaly");

注意事项

localStorage 只能在同源页面之间共享，也就是说，两个页面的协议、域名和端口必须一致。如果从一个域名跳转到另一个域名，目标页面无法读取原页面保存的数据。

用户可以查看和修改 localStorage 中的数据，所以它只适合临时展示，不能用来判断付款是否成功。实际业务中，服务器应根据 transactionId 或 paymentReference 调用支付服务的验证接口。确认交易状态和金额后，再向用户显示最终付款结果。不能只根据客户端的 onSuccess 回调执行发货、充值或更新订单状态等操作。

备注：内容仅供参考。