Session Storage存储Section B/C值返回null及机票预订功能问题问询

问题根因 #

1. 核心语法错误：airplane.js中Section B、Section C的提交事件回调括号写错，座位数组、舱段参数没有传入对应的handleSubmit方法，导致存入sessionStorage的相关值为undefined，跳转后读取就会得到null。
2. 跳转时机错误：你同时给按钮加了HTML内联的跳转逻辑和JS的点击事件监听，可能出现跳转先执行、数据还没写入sessionStorage就跳页的情况，导致数据丢失。
3. 座位状态无法持久化：当前三个舱段的座位数组只存在页面临时变量中，每次刷新index.html都会重置为5个空位，无法保留历史预订记录。

修复方案 #

1. 先修改index.html，移除按钮的内联onclick跳转

把三个提交按钮的onclick="location.href='bookingPage.html';"属性全部删掉，修改后对应代码如下：

<!-- Section A按钮 -->
<input id = "bookSeatA" type="button" value="Book a Seat in Section A" />
<!-- Section B按钮 -->
<input id = "bookSeatB" type = "button" value = "Book a Seat in Section B">
<!-- Section C按钮 -->
<input id = "bookSeatC" type = "button" value = "Book a Seat in Section C">

2. 修复airplane.js的语法错误和逻辑

function start()
{
    // 优先从sessionStorage读取已有的座位状态，没有再初始化
    let sectionASeats = JSON.parse(sessionStorage.getItem("SECTION_A_SEATS")) || [];
    let sectionBSeats = JSON.parse(sessionStorage.getItem("SECTION_B_SEATS")) || [];
    let sectionCSeats = JSON.parse(sessionStorage.getItem("SECTION_C_SEATS")) || [];
    
    // 初始化座位数组
    if(sectionASeats.length === 0) {
        for (var k = 0; k < 5; k++)
        {
            sectionASeats[k] = 0;
            sectionBSeats[k] = 0;
            sectionCSeats[k] = 0;
        } 
    }

    var price1;
    price1 = Math.random() * (200 - 100) + 100;
    price1 = price1.toFixed(2);
    var price2 = (Math.random() * (300 - 100) + 100).toFixed(2);
    var price3 = (Math.random() * (300 - 100) + 100).toFixed(2);

    var priceArray = [price1, price2, price3];

    var buttonA = document.getElementById( "bookSeatA" );
    buttonA.addEventListener( "click", function() {
        bookSeat(sectionASeats);
        // 存更新后的座位状态
        sessionStorage.setItem("SECTION_A_SEATS", JSON.stringify(sectionASeats));
        handleSubmitA(priceArray[0],sectionASeats,"A");
    }, false );

    var buttonB = document.getElementById( "bookSeatB" );
    buttonB.addEventListener( "click", function() {
        bookSeat(sectionBSeats);
        sessionStorage.setItem("SECTION_B_SEATS", JSON.stringify(sectionBSeats));
        // 修复括号错误：把所有参数放到handleSubmitB的括号内
        handleSubmitB(priceArray[1],sectionBSeats,"B");
    }, false );

    var buttonC = document.getElementById( "bookSeatC" );
    buttonC.addEventListener( "click", function() {
        bookSeat(sectionCSeats);
        sessionStorage.setItem("SECTION_C_SEATS", JSON.stringify(sectionCSeats));
        // 修复括号错误：把所有参数放到handleSubmitC的括号内
        handleSubmitC(priceArray[2],sectionCSeats,"C");
    }, false );
   

    var result1 = "";
    var result2 = "" ;
    var result3 = "" ;

    result1 += checkSection(sectionASeats, "A" );
    result2 += checkSection(sectionBSeats, "B" );
    result3 += checkSection(sectionCSeats, "C" );

    priceArray.sort(function(a,b) {return a-b});

    document.getElementById("Section1Price").innerHTML = "$" + priceArray[0];
    document.getElementById("Section1").innerHTML = result1;
    
    document.getElementById("Section2Price").innerHTML = "$" + priceArray[1];
    document.getElementById("Section2").innerHTML = result2;

    document.getElementById("Section3Price").innerHTML ="$" +  priceArray[2];
    document.getElementById("Section3").innerHTML = result3;
}
function sectionSeatNum (array)
{
    for (var i = 0; i < array.length;i++)
    {
        if (array[i] == 1)
        {
            return i+1;
        }
    }
}

function handleSubmitA(priceForA,array,section)
{
    const name = document.getElementById("clientNameA").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForA);
    
    // 存完数据再跳转
    location.href='bookingPage.html';
    return;
}

function handleSubmitB(priceForB,array,section)
{
    const name = document.getElementById("clientNameB").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForB);
    
    // 存完数据再跳转
    location.href='bookingPage.html';
    return;
}

function handleSubmitC(priceForC,array,section)
{
    const name = document.getElementById("clientNameC").value;
    var seatNumber = sectionSeatNum(array);

    sessionStorage.setItem("ARRAY", JSON.stringify(array));
    sessionStorage.setItem("SECTION", section);
    sessionStorage.setItem("SEATNUM", seatNumber);
    
    sessionStorage.setItem("NAME", name);
    sessionStorage.setItem("PRICE", priceForC);
    
    // 存完数据再跳转
    location.href='bookingPage.html';
    return;
}

function bookSeat(array)
{
    for(var i = 0; i < array.length; i++)
    {
        if(array[i] == 0)
        {
            array[i] = 1;
            break;
        }
    }
}

function checkSection(array, section)
{
    var result;
    var check = true;
    var emptyCounter = 0;
    var takenCounter = 0;
    for (var i = 0;i<array.length;i++)
    {
        if(array[i] == 0)
        {
            emptyCounter++;
        }
        else{
            takenCounter++;
        }
    }

    if(takenCounter == array.length)
    {
        check = false;
        result = "<p>There are no seats available in Section " + section + ".</p>";
    }
    else{
        check = true;
        result = "<p>There are " + emptyCounter + " seats available in Section " + section + ".</p>";
    }
    return result;
}
window.addEventListener("load", start,false);

其他代码无需修改，修复后可以实现：

• Section B、C可以正常存储和读取预订信息，不会返回null
• 每次预订后对应舱段的座位数实时更新，刷新页面也不会重置
• 跳转前保证所有数据写入sessionStorage，不会丢失数据

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