在Web开发中，我们经常需要在不同的HTML页面之间传递数据，这可以通过多种方式实现，例如使用URL参数、cookies、localStorage、sessionStorage或者通过表单提交等，下面我将详细介绍这些方法。
（图片来源网络，侵删）
1、使用URL参数
URL参数是一种常见的传值方式，它通过在URL中添加查询字符串来实现，查询字符串以问号（？）开始，后面跟着一系列的键值对，键值对之间用&符号分隔。http://example.com/page2.html?key1=value1&key2=value2。
在HTML页面中，我们可以通过JavaScript获取URL中的参数，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<a href="page2.html?key1=value1&key2=value2">Go to Page 2</a>
<script>
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('key1')); // 输出 "value1"
console.log(urlParams.get('key2')); // 输出 "value2"
</script>
</body>
</html>
2、使用Cookies
Cookies是一种存储在用户浏览器上的小型文本文件，用于跟踪和识别用户，我们可以在JavaScript中使用document.cookie来设置和读取cookies。
以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<button onclick="setCookie('key', 'value', 7)">Set Cookie</button>
<button onclick="getCookie('key')">Get Cookie</button>
<script>
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
</body>
</html>
3、使用localStorage和sessionStorage
localStorage和sessionStorage是HTML5提供的两种客户端存储方式，它们可以用来存储大量的数据，而且数据不会随着页面的刷新而消失，这两种存储方式的使用方式类似，都提供了setItem和getItem两个方法，区别在于，localStorage的数据会永久保存，而sessionStorage的数据只会在当前会话中有效。
以下是一个简单的示例：
<input type="text" id="key" value="value"> <button onclick="setData()">Set Data</button> <button onclick="getData()">Get Data</button> <script> function setData() { localStorage.setItem('key', document.getElementById('key').value); } function getData() { alert(localStorage.getItem('key')); } </script> ```
4、通过表单提交
如果我们有一个表单，并且希望将表单中的数据发送到另一个HTML页面，我们可以使用表单的action属性指定目标页面的URL，然后使用method属性指定发送数据的方式（GET或POST），当用户点击提交按钮时，浏览器会将表单数据附加到URL中并发送到服务器，服务器可以根据这些数据来生成新的HTML页面。
以下是一个简单的示例：
``html <form action="page2.html" method="get"> Key: <input type="text" name="key"><br> Value: <input type="text" name="value"><br> <input type="submit"> </form> ``
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/448113.html
微信扫一扫