JavaScript uses link jump to pass the method of array object data type

In the front end, sometimes it is necessary to use links to pass parameters. The transfer of basic data types is relatively simple, but it is more troublesome to pass reference data types. Although sessionStorage or localStorage can also be used to achieve page parameter transfer, if it is Multi-terminal parameter transfer cannot be realized. For example, a QR code is generated on a page on the PC side, which needs to be opened and browsed on the mobile phone side, but the mobile phone may need to request data from the background when entering, and parameters will be used at this time. Let me share with you a method of passing reference data types between pages, which can also realize QR code parameter passing:

First understand the normal transfer of basic data types

Jump parameter transfer refers to splicing some data into the URL path when the page jumps, and jumping to another page together. Pay attention to the splicing here, and the return will be in the form of a string:

JavaScript jump page method

window.location.href = 'http://www.baidu.com'; // 通过改变location.href来实现页面跳转 常用
window.location.replace('http://www.baidu.com'); // 通过location.replace替换当前页面路径来实现页面跳转
window.location.assign('http://www.baidu.com'); // 通过location.assign加载新文档来实现页面跳转

Pay attention to the difference:
href jumps to the current page, and the back button of the browser can still be clicked.
Replace replaces the path of the current page, and the back button of the browser will not take effect
. The URL must be an absolute path, otherwise the page cannot be redirected, and in versions below IE8, if the length of the URL exceeds 2083 characters, calling the location.assign() method will fail, and in some browsers , calling location.assign() after the page has loaded may cause the page to flicker

JavaScript route passing parameters

You can refer to the address link of the browser to use routing parameters. The parameters after ' ? ' are separated by ' & '

// 单传值
window.location.href = 'http://www.baidu.com?1';
window.location.replace('http://www.baidu.com?1');
window.location.assign('http://www.baidu.com?1');
// 传键值对
window.location.href = 'http://www.baidu.com?id=1';
window.location.replace('http://www.baidu.com?id=1');
window.location.assign('http://www.baidu.com?id=1');
// 多个参数
window.location.href = 'http://www.baidu.com?id=1&value=asdf';
window.location.replace('http://www.baidu.com?id=1&value=asdf');
window.location.assign('http://www.baidu.com?id=1&value=asdf');

These are just simple data types. If you need to pass a reference data type or there are Chinese characters in the data, you need to use the JSON.stringify() method to convert the data first

let str = '张三';
let json_str = JSON.stringify(str);// 转换为json格式
//
window.location.href = encodeURL('http://www.baidu.com?id=1&value=' + json_str);
//
window.location.replace(encodeURL('http://www.baidu.com?id=1&value=' + json_str));
//
window.location.assign(encodeURL('http://www.baidu.com?id=1&value=' + json_str));

JavaScript routing receives parameters

let str = window.location.search; //获取链接中传递的参数
let params = str.substring(str.indexOf("=") + 1);
dataJson = JSON.parse(decodeURI(params));
console.log("dataJson :", dataJson);

// 或者
let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('id')));
console.log(JSON.parse(data.get('value')));

The second method is recommended here, which is easier

transfer object

The method has been explained above, the following is an example:
page jump demo:

let arr = {
    
    
	name: 'zz',
	sex: '男',
	age: 11
}
let datajson = JSON.stringify(arr);
// 跳转页面，这里需要大家自己将页面路径进行修改
window.location.href = encodeURI('accept.html?datajson=' + datajson);

Receive parameter demo:

let dataJson;
let str = window.location.search; //获取链接中传递的参数
let arr = str.substring(str.indexOf("=") + 1);
dataJson = $.parseJSON(decodeURI(arr));
console.log("dataJson :", dataJson);
// 或者

let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('datajson')));

Effect: