通过页面跳转传对象如何通过window.location.href接收一个对象

在页面跳转中，我们可以通过将对象序列化为字符串，然后将其作为 URL 参数传递给下一个页面，下一个页面再将其反序列化为对象。具体实现步骤如下：

1. 在页面 A 中将对象序列化为字符串，然后将其作为 URL 参数传递给页面 B：

var obj = {name: 'Tom', age: 18};
var objStr = JSON.stringify(obj);
window.location.href = 'pageB.html?data=' + encodeURIComponent(objStr);

2. 在页面 B 中通过解析 URL 参数获取序列化的字符串，然后将其反序列化为对象：

var objStr = decodeURIComponent(window.location.search.substring(1).split('=')[1]);
var obj = JSON.parse(objStr);
console.log(obj); // {name: 'Tom', age: 18}

需要注意的是，这种方式只适用于传递较小的对象，因为 URL 的长度是有限制的，如果传递的对象较大，会导致 URL 过长，可能会被浏览器拦截。对于较大的对象，建议使用其他方式进行传递，如使用 sessionStorage 或 localStorage。

相关问题

window.location.href 传递对象

### 使用 `window.location.href` 传递 JavaScript 对象

当需要通过 `window.location.href` 在页面之间传递 JavaScript 对象时，通常的做法是先将对象序列化为字符串形式，最常用的方法是将其转换成 JSON 字符串并作为查询参数附加到目标 URL 上。为了确保这些数据能在 URL 中被正确传输，应当使用 `encodeURIComponent()` 函数来编码对象中的特殊字符。

对于简单的对象可以直接利用 `JSON.stringify()` 方法进行序列化处理：

// 创建要传递的对象
let obj = {
    name: 'chen',
    age: 18,
};

// 将对象转化为 JSON 字符串，并对其进行 URI 编码
const encodedObj = encodeURIComponent(JSON.stringify(obj));

// 构建新的 URL 并执行跳转
window.location.href = './targetPage.html?objData=' + encodedObj;

接收端可以通过解析 URL 参数获取该对象，并再次调用 `JSON.parse()` 来反序列化回原始对象结构[^1]。

需要注意的是，在某些情况下如果对象非常大，则可能会超出浏览器支持的最大 URL 长度限制（不同浏览器有不同的规定），这时建议考虑其他方式如存储于 sessionStorage 或 localStorage 等本地储存机制中再携带 key 进行跨页共享[^2]。

window.location.href传参

window.location.href传参是一种在URL上拼接参数值进行传递的方法。可以直接使用window.location.href进行页面跳转，并在URL上通过问号传参的方式传递参数值。例如，使用window.location.href = "./punch/clock_frm.html?modFlag=" + modFlag + '&role=' + role; 可以将modFlag和role的值传递给目标页面。\[1\]

另外，还可以使用问号在URL上拼接参数值进行传递。例如，使用window.location.href = "/static/test.html?type=" + this.selected + '&value=' + val; 可以将this.selected和val的值传递给目标页面。\[2\]

需要注意的是，为了避免传递的参数值中包含特殊字符导致URL错误，可以使用encodeURI()函数对参数值进行编码。例如，使用window.location.href = encodeURI("这里是你要跳转的地址?id=" + id); 可以将id的值传递给目标页面。\[3\]
#### 引用[.reference_title]
- *1* [转载--window.location.href传参/传值汇总](https://blog.csdn.net/weixin_47382065/article/details/120264692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [window.location.href跳转页面并传值及接收值](https://blog.csdn.net/qq_42969135/article/details/109360734)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [jq使用window.location.href传参和接收参数](https://blog.csdn.net/lucky_Lzx/article/details/107519438)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]