herf html 如何传值

通过URL参数：URL参数是通过在URL的末尾添加查询字符串来传递的。查询字符串以问号（?）开始，参数之间用与号（&）分隔。比如，通过href="page2.html?name=John&age=30"可以将name和age两个参数传递到page2.html。接下来，我们将详细介绍这三种方法及其具体应用场景。

一、通过URL参数传值

URL参数是通过在URL的末尾添加查询字符串来传递的。查询字符串以问号（?）开始，参数之间用与号（&）分隔。这种方法广泛用于需要在页面之间传递少量数据的情况。

1.1 基本用法

<a href="page2.html?name=John&age=30">Go to Page 2</a>

在page2.html中，可以使用JavaScript获取URL参数：

function getUrlParams() {

    const params = new URLSearchParams(window.location.search);
    return {
        name: params.get('name'),
        age: params.get('age')
    };
}
const params = getUrlParams();
console.log(params.name); // John
console.log(params.age);  // 30

1.2 解析复杂参数

如果需要传递复杂的数据结构，可以将其序列化为JSON字符串。例如：

<a href='page2.html?data={"name":"John","age":30}'>Go to Page 2</a>

在page2.html中，可以解析JSON字符串：

function getUrlParams() {

    const params = new URLSearchParams(window.location.search);
    return JSON.parse(params.get('data'));
}
const params = getUrlParams();
console.log(params.name); // John
console.log(params.age);  // 30

二、使用锚点传值

锚点（Anchor）是通过在URL中使用#符号来实现页面内导航的。虽然锚点主要用于页面内的跳转，但也可以用于在页面之间传递简单的参数。

2.1 基本用法

<a href="page2.html#section1">Go to Section 1 in Page 2</a>

在page2.html中，可以使用JavaScript获取锚点值：

const anchor = window.location.hash.substring(1);

console.log(anchor); // section1

2.2 结合URL参数

可以结合URL参数和锚点一起使用：

<a href="page2.html?name=John#section1">Go to Section 1 in Page 2</a>

在page2.html中，既可以获取URL参数，也可以获取锚点值：

function getUrlParams() {

    const params = new URLSearchParams(window.location.search);
    return {
        name: params.get('name'),
        anchor: window.location.hash.substring(1)
    };
}
const params = getUrlParams();
console.log(params.name);   // John
console.log(params.anchor); // section1

三、结合JavaScript传值

JavaScript提供了更灵活和强大的方式来在页面之间传递数据，例如通过localStorage、sessionStorage或cookies。

3.1 localStorage和sessionStorage

localStorage和sessionStorage是浏览器提供的本地存储机制，可以在页面之间共享数据。

localStorage示例：

<a href="page2.html" onclick="storeData()">Go to Page 2</a>

<script>
function storeData() {
    localStorage.setItem('name', 'John');
    localStorage.setItem('age', '30');
}
</script>

在page2.html中，可以读取存储的数据：

const name = localStorage.getItem('name');

const age = localStorage.getItem('age');
console.log(name); // John
console.log(age);  // 30

sessionStorage示例：

<a href="page2.html" onclick="storeData()">Go to Page 2</a>

<script>
function storeData() {
    sessionStorage.setItem('name', 'John');
    sessionStorage.setItem('age', '30');
}
</script>

在page2.html中，可以读取存储的数据：

const name = sessionStorage.getItem('name');

const age = sessionStorage.getItem('age');
console.log(name); // John
console.log(age);  // 30

3.2 使用cookies

Cookies是另一种在页面之间传递数据的方式，适用于需要在多个会话之间共享数据的情况。

设置cookie：

<a href="page2.html" onclick="setCookie()">Go to Page 2</a>

<script>
function setCookie() {
    document.cookie = "name=John";
    document.cookie = "age=30";
}
</script>

读取cookie：

function getCookie(name) {

    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
const name = getCookie('name');
const age = getCookie('age');
console.log(name); // John
console.log(age);  // 30

四、结合表单提交传值

在某些情况下，可能需要通过表单提交数据。在这种情况下，可以使用隐藏字段在URL中传递数据。

4.1 使用隐藏字段

隐藏字段可以通过

<form action="page2.html" method="get">

    <input type="hidden" name="name" value="John">
    <input type="hidden" name="age" value="30">
    <input type="submit" value="Submit">
</form>

function getUrlParams() {

    const params = new URLSearchParams(window.location.search);
    return {
        name: params.get('name'),
        age: params.get('age')
    };
}
const params = getUrlParams();
console.log(params.name); // John
console.log(params.age);  // 30

<a href="page2.php?name=John&age=30">Go to Page 2</a>

<?php

$name = $_GET['name'];
$age = $_GET['age'];
echo "Name: $name, Age: $age";
?>