本文主要介绍如何利用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>