多HTML页面共用JavaScript文件失效：跨页面表单数据传递失败

问题现象 #

在begin.html页面提交表单，数据存入JS数组后仅能在当前页面元素上显示，跳转到planetwindow.html页面后，无法读取并展示该数据。

原因分析 #

• 每个浏览器页面拥有独立的JavaScript执行上下文，arr数组仅存在于begin.html的内存中，页面跳转后会被销毁。
• planetwindow.html加载plans.js时找不到form元素，代码执行异常，且无法访问begin.html中的数组数据。

解决方案 #

使用浏览器的localStorage存储数据，它属于浏览器级别的持久化存储，同一域名下的所有页面均可访问。

修改后的代码 #

begin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <form>
        <label for="planet">Select a Planet:</label>
        <select id="planet" name="planet">
            <option value="mercury">Mercury</option>
            <option value="venus">Venus</option>
            <option value="earth">Earth</option>
            <option value="mars">Mars</option>
            <option value="jupiter">Jupiter</option>
            <option value="saturn">Saturn</option>
            <option value="uranus">Uranus</option>
            <option value="neptune">Neptune</option>
        </select><br><br>

        <label for="departureDate">Departure Date:</label>
        <input type="date" id="departureDate" name="departureDate"><br><br>

        <label for="planet2">Select a Planet:</label>
        <select id="planet2" name="planet2">
            <option value="mercury">Mercury</option>
            <option value="venus">Venus</option>
            <option value="earth">Earth</option>
            <option value="mars">Mars</option>
            <option value="jupiter">Jupiter</option>
            <option value="saturn">Saturn</option>
            <option value="uranus">Uranus</option>
            <option value="neptune">Neptune</option>
        </select><br><br>

        <label for="departureDate2">Departure Date:</label>
        <input type="date" id="departureDate2" name="departureDate2"><br><br>

        <input type="submit" value="Submit">
    </form>
    
    <button onclick="location.href = 'planetwindow.html';" id="thing" class="float-left submit-button">Search Flights</button>
    <script type="text/javascript" src="./plans.js"></script>
</head>
<body>
</body>
</html>

注：修正了第二个下拉框的name属性为planet2（避免键名重复），以及第二个日期输入框的type为date（原date2为无效类型）

planetwindow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>You are on Saturn idk</title>
</head>
<body>
    <div>You did it</div>
    <p id="test"></p>
    <button type="submit" onclick="location.href = 'game.html';" id="myButton" class="float-left submit-button">Go to next thing</button>
    <script src="plans.js"></script>
</body>
</html>

plans.js

// 处理begin.html的表单提交逻辑
const form = document.querySelector('form');
if (form) {
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const fd = new FormData(form);
        // 将FormData转为对象，转为JSON字符串存入localStorage
        const formData = Object.fromEntries(fd);
        localStorage.setItem('flightPlan', JSON.stringify(formData));
    });
}

// 处理planetwindow.html的数据展示逻辑
const testElement = document.getElementById('test');
if (testElement) {
    const savedData = localStorage.getItem('flightPlan');
    if (savedData) {
        const flightPlan = JSON.parse(savedData);
        // 按需调整展示内容，示例展示第一个星球选择结果
        testElement.innerHTML = `Selected First Planet: ${flightPlan.planet}`;
    }
}

补充说明 #

1. localStorage的数据会持久化保存，若不需要长期存储，可替换为sessionStorage（浏览器关闭后自动清除）。
2. 提交表单后，点击「Search Flights」按钮跳转，planetwindow.html即可读取到存储的数据。

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