js怎么界面传值

JS界面传值的几种方法包括：URL参数、LocalStorage、SessionStorage、Cookie、表单提交、父子组件之间的props传递。

其中，URL参数是最常见且简单的一种方法。通过在URL中附加查询字符串，可以在不同页面之间传递数据。例如，当用户点击一个链接时，可以在URL中加上参数，如?name=John&age=25。在目标页面中，可以通过JavaScript来解析这些参数，获取数据并使用。

一、URL参数传值

URL参数是一种非常常见和简单的传值方式，适用于页面间数据传递。通过在URL中附加查询字符串，可以在不同页面之间传递数据。这种方法的优点是简单易用，但缺点是传递的数据会暴露在URL中，存在一定的安全隐患。

1、设置URL参数

在设置URL参数时，可以在链接中直接加上查询字符串。例如：

<a href="nextPage.html?name=John&age=25">Click Here</a>

2、解析URL参数

在目标页面中，可以使用JavaScript解析URL参数来获取数据。以下是一个简单的示例：

function getQueryParams() {
    let params = {};
    let queryString = window.location.search.substring(1);
    let queries = queryString.split("&");
    for (let i = 0; i < queries.length; i++) {
        let pair = queries[i].split("=");
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return params;
}
let params = getQueryParams();
console.log(params.name); // Output: John
console.log(params.age);  // Output: 25

二、LocalStorage

LocalStorage 是一种Web存储方式，可以在用户浏览器中存储数据，且数据不会随着浏览器关闭而丢失。这种方法适用于需要长期存储的数据。

1、设置LocalStorage

可以使用localStorage.setItem方法来设置数据。例如：

localStorage.setItem('username', 'John');
localStorage.setItem('age', '25');

2、获取LocalStorage

使用localStorage.getItem方法来获取数据。例如：

let username = localStorage.getItem('username');
let age = localStorage.getItem('age');
console.log(username); // Output: John
console.log(age);      // Output: 25

三、SessionStorage

SessionStorage 与 LocalStorage 类似，但数据仅在会话期间有效，一旦关闭浏览器窗口或标签页，数据就会丢失。适用于临时数据存储。

1、设置SessionStorage

可以使用sessionStorage.setItem方法来设置数据。例如：

sessionStorage.setItem('sessionID', '12345');
sessionStorage.setItem('token', 'abcdef');

2、获取SessionStorage

使用sessionStorage.getItem方法来获取数据。例如：

let sessionID = sessionStorage.getItem('sessionID');
let token = sessionStorage.getItem('token');
console.log(sessionID); // Output: 12345
console.log(token);     // Output: abcdef

四、Cookie

Cookie 是另一种数据存储方式，可以在用户浏览器中存储小量数据，并可以在多个页面之间共享。适用于需要与服务器端交互的数据存储。

1、设置Cookie

可以使用document.cookie来设置Cookie。例如：

document.cookie = "username=John; path=/";
document.cookie = "age=25; path=/";

2、获取Cookie

使用document.cookie来获取Cookie，并解析数据。例如：

function getCookie(name) {
    let cookies = document.cookie.split('; ');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].split('=');
        if (cookie[0] === name) {
            return cookie[1];
        }
    }
    return null;
}
let username = getCookie('username');
let age = getCookie('age');
console.log(username); // Output: John
console.log(age);      // Output: 25

五、表单提交

表单提交是传递数据的另一种常见方式，适用于需要从用户输入中获取数据并传递到服务器的情况。

1、创建表单

首先，创建一个HTML表单。例如：

<form id="myForm" action="nextPage.html" method="GET">
    <input type="text" name="username" value="John">
    <input type="number" name="age" value="25">
    <input type="submit" value="Submit">
</form>

2、处理表单数据

在目标页面中，可以通过URL参数来获取表单提交的数据，例如：

let params = getQueryParams(); // 使用之前定义的getQueryParams函数
console.log(params.username); // Output: John
console.log(params.age);      // Output: 25

六、父子组件之间的props传递

在现代前端框架（如React、Vue等）中，父子组件之间的数据传递是一种非常常见的场景。通过props可以将数据从父组件传递到子组件。

1、在父组件中传递数据

以下是React中的示例：

function ParentComponent() {
    const username = "John";
    const age = 25;
    return (
        <ChildComponent username={username} age={age} />
    );
}

2、在子组件中接收数据

在子组件中，可以通过props来接收数据。例如：

function ChildComponent(props) {
    return (
        <div>
            <p>Username: {props.username}</p>
            <p>Age: {props.age}</p>
        </div>
    );
}

通过这些方法，我们可以实现JS界面传值，并在不同页面或组件之间传递数据。每种方法都有其优点和适用场景，选择合适的方法可以更有效地管理和传递数据。