本文主要介绍如何利用JS及html实现页面之间数据的传递，以登录之后显示用户信息为例进行讲解。
1.会话存储的使用：将用户输入的登录信息存储于会话存储空间中，当跳转至另一页面后，利用该存储空间中的信息即可进行显示。代码如下：
登录页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index.html">
<div><span>用户名：</span><input type="text"></div>
<div><span>昵称：</span><input type="text"></div>
<div><input type="submit" value="登录"></div>
</form>
<script>
var inputs = document.querySelectorAll('input');
inputs[2].onclick = function() {
if (inputs[0].value == '' || inputs[1].value == '') {
alert('输入不可为空!');
return;
}
// 窗口关闭即销毁
sessionStorage.setItem('name', inputs[0].value);
sessionStorage.setItem('nickname', inputs[1].value);
}
</script>
</body>
</html>首页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>首页</h1>
<div><span>欢迎</span> <span></span></div>
<div><span>你的昵称是：</span><span></span></div>
<script>
var spans = document.querySelectorAll('span');
spans[1].innerHTML = sessionStorage.getItem('name');
spans[3].innerHTML = sessionStorage.getItem('nickname');
</script>
</body>
</html>2.location.search的使用：利用form表单的action属性、location的href属性或是form表单的get方法可实现页面的跳转及数据在网址上的显示，之后利用location.search并结合字符串方法的使用即可获取相应的登录信息。
（1）利用form的action属性（method须指定为post请求）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index1.html" method="post">
<div><span>用户名：</span><input type="text"></div>
<div><span>昵称：</span><input type="text"></div>
<div><input type="submit" value="登录"></div>
</form>
<script>
var inputs = document.querySelectorAll('input');
var form = document.querySelector('form');
inputs[2].onclick = function(e) {
if (inputs[0].value == '' || inputs[1].value == '') {
alert('输入不可为空!');
e.preventDefault();
return;
}
form.action = 'index1.html?name=' + inputs[0].value + '&nickname=' + inputs[1].value;
}
</script>
</body>
</html>利用location.href:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div><span>用户名：</span><input type="text"></div>
<div><span>昵称：</span><input type="text"></div>
<div><input type="submit" value="登录"></div>
</form>
<script>
var inputs = document.querySelectorAll('input');
var form = document.querySelector('form');
inputs[2].onclick = function(e) {
e.preventDefault();
if (inputs[0].value == '' || inputs[1].value == '') {
alert('输入不可为空!');
return;
}
location.href = './index2.html?name=' + inputs[0].value + '&nickname=' + inputs[1].value;
}
</script>
</body>
</html>两种方法的主页是一致的，如下：（需要注意的是，网址的中文若要正常显示出来，需要通过decodeURI()函数进行解码操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>首页</h1>
<div><span>欢迎</span> <span></span></div>
<div><span>你的昵称是：</span><span></span></div>
<script>
var spans = document.querySelectorAll('span');
var t = decodeURI(location.search);
console.log(t);
spans[1].innerHTML = t.slice(t.indexOf('=') + 1, t.indexOf('&'));
spans[3].innerHTML = t.slice(t.lastIndexOf('=') + 1);
</script>
</body>
</html>另外，form的get请求提供了更为简单的方法，可直接获取表单内容构成搜索参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index1.html" method="get">
<div><span>用户名：</span><input type="text" name="username"></div>
<div><span>昵称：</span><input type="text" name="nickname"></div>
<div><input type="submit" value="登录"></div>
</form>
<script>
var inputs = document.querySelectorAll('input');
var form = document.querySelector('form');
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
