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 中删除这个数据。
以上就是两种方式的详细攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现把一个页面层数据传递到另一个页面的两种方式 - Python技术站