js页面跳转怎么传对象

JS页面跳转传对象的方法主要包括使用URL参数、使用localStorage、使用sessionStorage、使用Cookies。其中，使用URL参数是最常见且简单的方法，通过将对象转换为字符串形式附加在URL后面传递。接下来，我们详细讲解这四种方法。

一、使用URL参数

1.1 序列化对象

在JavaScript中，我们可以使用JSON.stringify方法将对象转换为JSON字符串，然后将其附加到URL中作为参数进行传递。

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
window.location.href = "nextPage.html?data=" + encodeURIComponent(jsonString);

1.2 解析URL参数

在目标页面中，我们可以通过URLSearchParams解析URL中的参数，并使用JSON.parse将字符串转换回对象。

let params = new URLSearchParams(window.location.search);
let jsonString = params.get('data');
let obj = JSON.parse(decodeURIComponent(jsonString));
console.log(obj);

二、使用localStorage

2.1 存储对象

localStorage可以在用户浏览器中存储数据，且数据不会过期。我们可以将对象转换为JSON字符串存储在localStorage中。

let obj = {name: "John", age: 30, city: "New York"};
localStorage.setItem('data', JSON.stringify(obj));
window.location.href = "nextPage.html";

2.2 获取对象

在目标页面中，我们可以通过localStorage.getItem获取存储的字符串，并使用JSON.parse将其转换回对象。

let jsonString = localStorage.getItem('data');
let obj = JSON.parse(jsonString);
console.log(obj);

三、使用sessionStorage

3.1 存储对象

sessionStorage与localStorage类似，但数据仅在当前会话下有效。我们可以将对象转换为JSON字符串存储在sessionStorage中。

let obj = {name: "John", age: 30, city: "New York"};
sessionStorage.setItem('data', JSON.stringify(obj));
window.location.href = "nextPage.html";

3.2 获取对象

在目标页面中，我们可以通过sessionStorage.getItem获取存储的字符串，并使用JSON.parse将其转换回对象。

let jsonString = sessionStorage.getItem('data');
let obj = JSON.parse(jsonString);
console.log(obj);

四、使用Cookies

4.1 存储对象

我们可以将对象转换为JSON字符串存储在Cookies中，但需要注意的是，Cookies的大小受到限制，且数据在每次请求时都会被发送到服务器。

let obj = {name: "John", age: 30, city: "New York"};
document.cookie = "data=" + encodeURIComponent(JSON.stringify(obj)) + "; path=/";
window.location.href = "nextPage.html";

4.2 获取对象

在目标页面中，我们可以通过解析document.cookie来获取存储的字符串，并使用JSON.parse将其转换回对象。

function getCookie(name) {
    let value = "; " + document.cookie;
    let parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}
let jsonString = getCookie('data');
let obj = JSON.parse(decodeURIComponent(jsonString));
console.log(obj);

五、总结

在JavaScript中，页面跳转传递对象的主要方法包括使用URL参数、使用localStorage、使用sessionStorage、使用Cookies。每种方法都有其优缺点和适用场景。在实践中，我们可以根据具体需求选择合适的方法。例如，使用URL参数适用于简单数据传递，而localStorage和sessionStorage适用于存储较大数据量且不需要在每次请求中发送到服务器的数据。