HTML如何实现单页用户输入内容跨页传递并展示到其他页面表格

利用浏览器localStorage（持久存储全局宾客列表）和sessionStorage（临时存储当前提交用户姓名）实现，修改代码量极小，满足你当前的功能需求。

1. 修改第一页（信息录入页）代码 #

调整表单结构 + 改写提交逻辑 #

把所有输入控件移入form内部，修改提交事件逻辑，将数据存入本地存储后再跳转：

@page
@model RSVPModel
@{
    ViewData["Title"] = "RSVP";
}
<h1>@ViewData["Title"]</h1>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content=" width=device-width, initial-scale=1.0" />
    <title>RSVP</title>
    <link rel="stylesheet" type=" text/css" href="style.css"/>
</head>

<body>
        <div id="container">
            <form action="Submitted">
                <div class="input">Name: <input id="name" name="name" type="text" /></div>
                <div class="input">Age: <input id="age" name="age" type="number" /></div>
                <div class="input">Arrival Time: <input id="arrtime" name="arrtime" type="time" /></div>
                <label for="parking">Request Parking?</label>
                <select name="parking" id="parking"> 
                    <option value=""></option>
                    <option value="yes">yes</option>
                    <option value="no">no</option>
                </select>
                <button id="entry" type="button">Submit RSVP</button>
            </form>
        </div>
    

    <script>
        var entry = document.getElementById('entry');
        entry.addEventListener("click", displayDetails);

        function displayDetails() {
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var arrtime = document.getElementById("arrtime").value;
            var parking = document.getElementById("parking").value;

            if (!name || !age || !arrtime || !parking) {
                alert("Please fill all fields before proceeding");
                return;
            }

            // 存储当前提交用户姓名，供第二页展示
            sessionStorage.setItem('currentUserName', name);
            // 存储所有宾客列表到本地存储，供第三页展示
            let guestList = JSON.parse(localStorage.getItem('guestList') || '[]');
            guestList.push({name, age, arrtime, parking});
            localStorage.setItem('guestList', JSON.stringify(guestList));

            // 提交跳转至确认页
            document.querySelector('form').submit();
        }
    </script>
</body>    
</html>

2. 修改第二页（确认页）代码 #

新增脚本读取当前提交的用户名，插入到感谢提示中：

@page
@model SubmittedModel
@{
    ViewData["Title"] = "RSVP Submitted";
}

<div class="text-center">
    <h1 class="display-4" id="thankTip">Thank you for your RSVP!</h1>
    <p>It's great that you're coming. The drinks are already in the fridge!</p>
    <p>Click <a href="GuestList">here</a> to see who is coming.</p>
</div>

<script>
    let userName = sessionStorage.getItem('currentUserName');
    if(userName){
        document.getElementById('thankTip').innerText = `Thank you ${userName} for your RSVP!`;
    }
</script>

3. 修改第三页（宾客列表页）的Script.js #

如果没有该文件直接新建，写入以下逻辑，读取本地存储的宾客列表渲染到表格：

window.onload = function(){
    let guestList = JSON.parse(localStorage.getItem('guestList') || '[]');
    let table = document.getElementById('display');
    // 循环渲染每行宾客信息
    guestList.forEach(guest => {
        let newRow = table.insertRow();
        newRow.insertCell(0).innerText = guest.name;
        newRow.insertCell(1).innerText = guest.age;
        newRow.insertCell(2).innerText = guest.arrtime;
        newRow.insertCell(3).innerText = guest.parking;
    })
}

注意说明 #

该方案数据存储在用户本地浏览器，清除缓存后数据会丢失，如果需要多用户全局共享宾客数据，可将存储逻辑替换为服务端Session、轻量数据库即可。

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