在HTML页面间传值，通常有几种方法：URL参数、表单提交、Cookies、Session和LocalStorage，下面分别介绍这几种方法的实现方式。
（图片来源网络，侵删）
1、URL参数
URL参数是一种最简单的传值方式，通过在URL中添加参数，将数据从一个页面传递到另一个页面，这种方式的缺点是参数暴露在URL中，不安全且可读性差。
有一个页面index.html，需要跳转到detail.html并传递一个参数id：
<!index.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Index</title>
</head>
<body>
<a href="detail.html?id=123">跳转到详情页</a>
</body>
</html>
在detail.html中，可以通过JavaScript获取URL中的参数：
<!detail.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Detail</title>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
var id = getQueryVariable("id");
alert("传递的id值为：" + id);
</script>
</head>
<body>
<!页面内容 >
</body>
</html>
2、表单提交
表单提交是一种常用的传值方式，通过表单将数据发送到服务器，服务器处理后返回结果，这种方式的优点是安全性较高，但需要服务器端的支持。
有一个页面index.html，包含一个表单：
<!index.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Index</title>
</head>
<body>
<form action="detail.html" method="post">
<label for="id">ID：</label>
<input type="text" id="id" name="id">
<input type="submit" value="提交">
</form>
</body>
</html>
在detail.html中，可以通过JavaScript获取表单中的参数：
<!detail.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Detail</title>
<script>
function getFormData() {
var formData = new FormData(document.querySelector('form'));
var data = {};
formData.forEach((value, key) => { data[key] = value; });
return data;
}
var formData = getFormData();
console.log(formData); // 输出表单数据对象
</script>
</head>
<body>
<!页面内容 >
</body>
</html>
3、Cookies和Session（服务器端）
Cookies和Session是在服务器端存储数据的方式，可以实现不同页面之间的数据共享，这种方式的优点是可以存储大量数据，但需要服务器端的支持。
在PHP中设置一个Session变量：
<?php // detail.php ?> <?php session_start(); ?> <?php $_SESSION['id'] = 123; ?>
在另一个PHP页面中获取Session变量：
<?php // another_page.php ?> <?php session_start(); ?> <?php echo "传递的id值为：" . $_SESSION['id']; ?>
4、LocalStorage（浏览器端）
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/412077.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复