目前知道两种方法
1.通过地址栏的跳转链接带参
index.html
html"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<button type="button" id="btn">点击跳转</button>
<script type="text/javascript">javascript">
document.getElementById("btn").onclick= function () {
let param = {
name:"张三",
age:"18",
miaoshu:"张三的传奇一生"
}
window.location.href = "new_file.html?name="+param.age
}
</script>
</body>
</html>
new_file.html
html"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1 style="text-align: center;">新页面</h1>
<script type="text/javascript">javascript">
var info = location.search.slice(); // 从location对象中的search属性得到地址栏里 ? 后面的参数 【接参】
console.log(info)
</script>
</body>
</html>
new_file.html跳转之后的效果是这样的
运行结果显示拿到了路径后面的参数，但是没有拿到自己具体想要传递的参数，下面封装了一个很实用的方法，用于拿到想要的参数：
javascript">var parseQueryString = function () {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function ($0, $1, $2, $3) {
objURL[$1] = $3;
}
);
return objURL;
};
//Example how to use it:
var params = parseQueryString();
alert(params["name"]);
所以new_file.html 文件最终代码是：
html"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1 style="text-align: center;">新页面</h1>
<script type="text/javascript">javascript">
var parseQueryString = function () {
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function ($0, $1, $2, $3) {
objURL[$1] = $3;
}
);
return objURL;
};
//Example how to use it:
var params = parseQueryString();
alert(params["name"]);
</script>
</body>
</html>
注：谷歌会对路径的参数进行转码，所以在谷歌用此方法传递参数时可以传递阿拉伯数字，不能传递中文参数，在IE则不存在该问题
2.通过localStorage传参
index.html
html"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>准备跳过去的页面</title>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1>我是准备<a href="./new_file.html">跳转</a>的页面</h1>
<script>javascript">
// 定义要传的参数
const param = {
name:'全易',
age:'23',
sex:'girl',
position:'font-end developer',
blogurl:'https://blog.csdn.net/qq_42618566'
}
/* //如果是多条数据加上这个数组JSON.stringify(param)改为JSON.stringify(array)
var array = [];
array.push(param); */
const params = JSON.stringify(param); // 因为localStorage只能存字符串，所以需要转化成JSON 字符串。
localStorage.setItem('params',params);
</script>
</body>
</html>
new_file.html
html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跳过来的页面</title>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1>我是跳转过来的页面</h1>
<h4>取的参数如下：</h4>
<div style="min-width: 480px; max-width: 36%;margin: 0 auto; text-align: left;">
<h4>姓名：<span class="name"></span></h4>
<h4>性别：<span class="sex"></span></h4>
<h4>职业：<span class="position"></span></h4>
<h4>csdn：<a class="link" href=""></a></h4>
</div>
<script>javascript">
// 取参并转为json对象
const param = JSON.parse(localStorage.params);
// 获取页面元素并赋值
document.querySelector('.name').innerText = param.name;
document.querySelector('.sex').innerText = param.sex;
document.querySelector('.position').innerText = param.position;
document.querySelector('.link').innerText = param.blogurl;
document.querySelector('.link').href = param.blogurl;
</script>
</body>
</html>
该方式的原理就是两个页面之间有个中转站，就相当于快递员(存数据的页面)把快递(数据)放到了快递站(localStorage)，然后你(取数据的页面)去快递站(localStorage)去取。
效果如下：
