如何用JavaScript存储表单数据并在新页面展示？报错解决

错误信息 #

Success.html:16 未捕获引用错误：request 未定义，位于Success.html第16行第35位

错误原因 #

request是后端服务（如Node.js/Express）专属的对象，前端浏览器环境中不存在该对象，直接调用request.body必然报错。同时原代码在提交API后直接跳转，未将表单数据传递到Success页面，导致无法展示用户输入内容。

解决方案 #

1. 修改表单提交逻辑（script.js） #

提交API成功后，将表单数据通过URL搜索参数传递到Success页面：

const formEl = document.querySelector("#form");

formEl.addEventListener("submit", (event) => {
  event.preventDefault();

  const formData = new FormData(formEl);
  const film = formData.get("film");
  const rating = formData.get("rating");

  fetch("https://reqres.in/api/form", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      film,
      rating,
    }),
  })
    .then((response) => {
      // 将数据组装为URL搜索参数
      const params = new URLSearchParams({ film, rating });
      window.location.href = `./Success.html?${params.toString()}`;
    })
    .catch((error) => {
      console.error(error);
    });
});

2. 修改Success页面数据接收逻辑（Success.html） #

从URL参数中读取数据并渲染到页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Success</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Thank you for your feedback!</h1>
    <p>You watched: <span id="film"></span></p>
    <p>You rated it: <span id="rating"></span></p>
    <script>
      // 解析URL中的搜索参数
      const urlParams = new URLSearchParams(window.location.search);
      const film = urlParams.get("film");
      const rating = urlParams.get("rating");

      const filmEl = document.querySelector("#film");
      const ratingEl = document.querySelector("#rating");

      filmEl.textContent = film;
      ratingEl.textContent = rating;
    </script>
  </body>
</html>

可选方案：用localStorage传递数据 #

如果不想在URL中暴露数据，可以改用本地存储：

• 修改script.js的跳转逻辑：

  .then((response) => {
    localStorage.setItem('surveyData', JSON.stringify({ film, rating }));
    window.location.href = './Success.html';
  })
  

• 修改Success.html的接收逻辑：

  <script>
    const surveyData = JSON.parse(localStorage.getItem('surveyData'));
    if (surveyData) {
      const filmEl = document.querySelector("#film");
      const ratingEl = document.querySelector("#rating");
      filmEl.textContent = surveyData.film;
      ratingEl.textContent = surveyData.rating;
      // 用完删除本地存储，避免残留旧数据
      localStorage.removeItem('surveyData');
    }
  </script>
  

内容的提问来源于stack exchange，提问作者user20077666