js 不同页面怎么传值

在JavaScript中，不同页面之间传值的核心方法包括：通过URL参数传递、使用浏览器的LocalStorage、SessionStorage、以及通过Cookies传递值。 这些方法各有优劣，例如，URL参数最为直接，适用于简单数据的传递；LocalStorage和SessionStorage能储存更复杂的数据结构，且不依赖于服务器；而Cookies可以在服务器端和客户端之间共享信息。下面，我们将详细探讨这些方法的具体实现和使用场景。

一、URL参数传递

1、通过查询字符串传值

查询字符串是一种简单且常用的方法，通过在URL末尾添加参数，可以在页面之间传递数据。例如：

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

在目标页面，可以使用JavaScript解析这些参数：

function getQueryParams() {
    let params = {};
    let queryString = window.location.search.substring(1);
    let queries = queryString.split("&");
    for (let query of queries) {
        let [key, value] = query.split("=");
        params[key] = decodeURIComponent(value);
    }
    return params;
}
let params = getQueryParams();
console.log(params.name); // John
console.log(params.age);  // 30

2、使用Hash传值

Hash部分不会被发送到服务器，可以用来传递参数：

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

在目标页面解析Hash：

function getHashParams() {
    let params = {};
    let hashString = window.location.hash.substring(1);
    let queries = hashString.split("&");
    for (let query of queries) {
        let [key, value] = query.split("=");
        params[key] = decodeURIComponent(value);
    }
    return params;
}
let hashParams = getHashParams();
console.log(hashParams.name); // John
console.log(hashParams.age);  // 30

二、LocalStorage和SessionStorage传值

1、使用LocalStorage

LocalStorage用于在不同页面之间持久化数据，适用于需要长期保存的数据。它的存储量更大，且数据不会随浏览器关闭而消失。

存储数据：

localStorage.setItem("name", "John");
localStorage.setItem("age", 30);

在另一个页面读取数据：

let name = localStorage.getItem("name");
let age = localStorage.getItem("age");
console.log(name); // John
console.log(age);  // 30

2、使用SessionStorage

SessionStorage用于在会话范围内存储数据，数据在页面会话结束（即浏览器关闭）后被清除。

存储数据：

sessionStorage.setItem("name", "John");
sessionStorage.setItem("age", 30);

在另一个页面读取数据：

let name = sessionStorage.getItem("name");
let age = sessionStorage.getItem("age");
console.log(name); // John
console.log(age);  // 30

三、Cookies传值

Cookies是一种在客户端和服务器端共享数据的方法，适用于需要在不同域之间共享数据的场景。其数据量较小，但可以设置过期时间和访问权限。

1、设置Cookies

使用JavaScript设置Cookies：

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
setCookie("name", "John", 7);
setCookie("age", 30, 7);

2、读取Cookies

使用JavaScript读取Cookies：

function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for(let i=0; i < ca.length; i++) {
        let 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;
}
let name = getCookie("name");
let age = getCookie("age");
console.log(name); // John
console.log(age);  // 30

四、PostMessage传值

1、使用PostMessage

PostMessage是一种安全的方式，用于在不同窗口或iframe之间传递数据。适用于需要在不同域之间传递数据的场景。

在源页面发送消息：

let targetWindow = document.getElementById('iframe').contentWindow;
targetWindow.postMessage({name: 'John', age: 30}, '*');

在目标页面接收消息：

window.addEventListener('message', function(event) {
    let data = event.data;
    console.log(data.name); // John
    console.log(data.age);  // 30
});

五、利用表单传值

1、通过表单提交传值

表单提交是一种传统但可靠的方法，可以通过隐藏字段在不同页面之间传递数据。

在源页面创建表单：

<form id="myForm" action="page2.html" method="post">
    <input type="hidden" name="name" value="John">
    <input type="hidden" name="age" value="30">
    <input type="submit" value="Submit">
</form>

在目标页面接收数据（需服务器端配合）：

// 在服务器端接收POST请求并处理数据

六、利用第三方库传值

1、使用Redux或MobX

如果你的项目使用了React等前端框架，可以利用状态管理库（如Redux或MobX）在不同组件或页面之间传递数据。

在源页面设置状态：

import { useDispatch } from 'react-redux';
import { setName, setAge } from './actions';
const Page1 = () => {
    const dispatch = useDispatch();
    const handleClick = () => {
        dispatch(setName('John'));
        dispatch(setAge(30));
    };
    return (
        <button onClick={handleClick}>Set Data</button>
    );
};

在目标页面读取状态：

import { useSelector } from 'react-redux';
const Page2 = () => {
    const name = useSelector(state => state.name);
    const age = useSelector(state => state.age);
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
        </div>
    );
};

七、使用项目管理系统传值

在团队协作中，使用项目管理系统可以有效地在不同页面或模块之间传递数据和信息。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

1、PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了丰富的功能模块，支持不同页面和模块之间的数据传递和协作。

2、Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了灵活的数据传递和协作功能，帮助团队高效地完成任务。

通过上述方法，开发者可以在不同页面之间传递数据，选择合适的方法可以提高代码的可读性和维护性。不同的方法适用于不同的场景，结合使用可以达到最佳效果。