如何使用JavaScript显示来自另一个HTML页面的值？

Hey there! Let's work through how to display the value from your first HTML page in the second one using JavaScript. Based on your code, here are two straightforward approaches you can use:

Method 1: Use GET method + URLSearchParams (Simple & Direct) #

Since your current form uses POST, frontend JS can't easily access the submitted data directly when the page redirects. Switching to GET lets us pass the value via the URL, which we can then read on the results page.

First, update your first HTML page's form to use GET:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="OrderUp.css">
    <title>OrderUp</title>
</head>
<body>
    <!-- Change method to "get" -->
    <form onsubmit="return results();" method="get" action="results.html" >
        Name : <input name = "name" type= "text" id="name"> <br>
        <input value = "Submit" type = "submit" >
    </form>
</body>
</html>

Then, add this JS to your results.html to read and display the name:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
</head>
<body>
    <h2>Your Submitted Information</h2>
    <p>Name: <span id="displayName"></span></p>

    <script>
        // Grab the URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const userName = urlParams.get('name');
        
        // Display the name (or a fallback if nothing was entered)
        document.getElementById('displayName').textContent = userName || 'No name provided';
    </script>
</body>
</html>

Method 2: Use localStorage (Keep Data Out of the URL) #

If you want to stick with POST or don't want the name showing up in the URL, you can store the value in localStorage before the form submits, then retrieve it on the results page.

Update your first page's results() function to save the name:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="OrderUp.css">
    <title>OrderUp</title>
    <script>
        function results() {
            // Get the input value
            const userName = document.getElementById('name').value;
            // Save it to localStorage
            localStorage.setItem('submittedName', userName);
            // Allow the form to submit normally
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return results();" method="post" action="results.html" >
        Name : <input name = "name" type= "text" id="name"> <br>
        <input value = "Submit" type = "submit" >
    </form>
</body>
</html>

Then read from localStorage in results.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
</head>
<body>
    <h2>Your Submitted Information</h2>
    <p>Name: <span id="displayName"></span></p>

    <script>
        // Retrieve the saved name
        const userName = localStorage.getItem('submittedName');
        // Display it (with a fallback)
        document.getElementById('displayName').textContent = userName || 'No name provided';
        
        // Optional: Clear the stored value so it doesn't linger for future visits
        localStorage.removeItem('submittedName');
    </script>
</body>
</html>

Quick Notes: #

• Method 1 is great for non-sensitive data since it's simple, but the value will be visible in the URL.
• Method 2 keeps the data hidden from the URL, but remember localStorage is stored in the user's browser—never use it for sensitive information like passwords.

内容的提问来源于stack exchange，提问作者sam s