通过页面跳转传对象如何通过window.location.href接收一个对象
时间: 2023-10-11 15:14:55 浏览: 148
在页面跳转中,我们可以通过将对象序列化为字符串,然后将其作为 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传参是一种在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 ]
window.location.href携带参数
window.location.href可以用于页面跳转并携带参数。例如,可以使用以下代码将参数传递给另一个页面:
window.location.href = "./punch/clock_frm.html?modFlag=" + modFlag + "&role=" + role;
这样就可以将modFlag和role的值作为参数传递到clock_frm.html页面中。
另外,你还可以在新页面中接收参数并将其转换为可用的json格式。可以使用以下代码来实现:
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")] = decodeURIComponent(strs[i].split("="));
}
console.log(theRequest);
}
这样,theRequest对象中就包含了从参数中提取出的键值对。
总之,window.location.href可以用于页面跳转并携带参数,然后可以在目标页面中接收和处理这些参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [转载--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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [window.location.href传递js对象参数及获取参数](https://blog.csdn.net/qq_17152035/article/details/73692750)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文