JS实现把一个页面层数据传递到另一个页面的两种方式

JS 实现把一个页面层数据传递到另一个页面主要有两种方式：URL参数传递和 localStorage 本地存储。

JS 实现把一个页面层数据传递到另一个页面主要有两种方式：URL参数传递和 localStorage 本地存储。

URL 参数传递

URL 参数传递是将要传递的数据拼接在 URL 中，通过 URL 传递给另一个页面。这种方式简单，易于实现，适用于传递少量数据。下面提供一个使用 URL 参数传递的示例：

发送页面：

const name = "Alice";
const age = 20;
const url = `./receive.html?name=${name}&age=${age}`;
window.location.href = url;

上述代码中，通过拼接 URL 参数的方式将 name 和 age 的值传递给了 receive.html 页面。

接收页面：

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get("name");
const age = urlParams.get("age");

console.log(name, age); // Alice 20

上述代码中，使用 URLSearchParams 对象获取 URL 中的参数值，从而获取到传递的数据。

localStorage 本地存储

localStorage 是 HTML5 中新增的本地存储 API，可以将数据存储到浏览器中，方便在不同页面中共享数据。下面提供一个使用 localStorage 本地存储的示例：

发送页面：

const data = {
  name: "Bob",
  age: 30
};
localStorage.setItem("myData", JSON.stringify(data));
window.location.href = "./receive.html";

上述代码中，将要传递的数据存储到了 localStorage 中，并跳转到了 receive.html 页面。

接收页面：

const data = JSON.parse(localStorage.getItem("myData"));
console.log(data.name, data.age); // Bob 30
localStorage.removeItem("myData"); // 可选操作，根据实际需求决定

上述代码中，通过 getItem 方法获取 localStorage 中存储的数据，并将其解析为对象后获取相应的属性值。获取完数据后，可以根据实际需求决定是否要从 localStorage 中删除这个数据。

以上就是两种方式的详细攻略。