状态栏更新故障求助：管理员审核操作无法同步至用户状态页

我开发的预约系统，状态栏需要根据管理员的操作（批准、拒绝、审核、允许付款）实时更新，当前用localStorage实现逻辑，打算先理清前端流程再对接后端。现在遇到的问题是：管理员点击「Review」按钮后，用户状态页的状态栏无法更新为「In Review」状态。附上相关代码，求帮忙定位问题。

管理员端操作逻辑代码 #

function getReservationRequests() {
    return JSON.parse(localStorage.getItem('reservationRequests')) || [];
}

document.addEventListener('DOMContentLoaded', function() {
    renderMenu();
    const requestsTableBody = document.querySelector('#requestsTable tbody');
    const requests = getReservationRequests();

    requests.forEach(request => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${request.user}</td>
            <td>${request.status}</td>
            <td>
                <button onclick="approveRequest('${request.user}', this)">Approve</button>
                <button onclick="denyRequest('${request.user}', this)">Deny</button>
                <button onclick="reviewRequest('${request.user}', this)">Review</button>
                <button onclick="allowPayment('${request.user}', this)">Allow Payment</button>
            </td>
        `;
        requestsTableBody.appendChild(row);
    });
});

function approveRequest(user, button) {
    updateRequestStatus(user, 'Request approved', button);
    alert(`Request for ${user} approved.`);
}

function denyRequest(user, button) {
    removeRequest(user);
    const row = button.closest('tr');
    row.parentNode.removeChild(row);
    alert(`Request for ${user} denied.`);
}

function reviewRequest(user, button) {
    updateRequestStatus(user, 'Request in review', button);
    alert(`Request for ${user} in review.`);
}

function allowPayment(user, button) {
    updateRequestStatus(user, 'Payment allowed', button);
    alert(`Payment allowed for ${user}.`);
}

function updateRequestStatus(user, status, button) {
    const reservationRequests = JSON.parse(localStorage.getItem('reservationRequests')) || [];
    const requestIndex = reservationRequests.findIndex(request => request.user === user);

    if (requestIndex !== -1) {
        reservationRequests[requestIndex].status = status;
        localStorage.setItem('reservationRequests', JSON.stringify(reservationRequests));
        return true;
    }
    return false;
}

function removeRequest(user) {
    let reservationRequests = JSON.parse(localStorage.getItem('reservationRequests')) || [];
    reservationRequests = reservationRequests.filter(request => request.user !== user);
    localStorage.setItem('reservationRequests', JSON.stringify(reservationRequests));
}

用户端状态栏HTML代码 #

<section class="status">
        <div class="status-container">
            <h2>Your Reservation Status</h2>
            <ul class="step-wizard-list">
                <li class="step-wizard-item" id="step1">
                    <span class="progress-count">1</span>
                    <span class="progress-label">Request Submitted</span>
                </li>
                <li class="step-wizard-item" id="step2">
                    <span class="progress-count">2</span>
                    <span class="progress-label">In Review</span>
                </li>
                <li class="step-wizard-item" id="step3">
                    <span class="progress-count">3</span>
                    <span class="progress-label">Request Approved/Denied</span>
                </li>
                <li class="step-wizard-item" id="step4">
                    <span class="progress-count">4</span>
                    <span class="progress-label">Payment</span>
                </li>
            </ul>
            <button id="payNowButton" style="display:none;" onclick="window.location.href='payment.html'">Pay Now</button>
        </div>
    </section>

用户端状态栏逻辑代码 #

function getReservationStatus() {
    const userEmail = localStorage.getItem('userEmail');
    const reservationRequests = JSON.parse(localStorage.getItem('reservationRequests')) || [];
    const userRequest = reservationRequests.find(request => request.user === userEmail);

    return userRequest ? userRequest.status : 'Request not submitted';
}

document.addEventListener('DOMContentLoaded', function() {
    renderMenu();
    const status = getReservationStatus();
    updateStatusBar(status);

    const acceptApprovalButton = document.getElementById('acceptApprovalButton');
    if (acceptApprovalButton) {
        acceptApprovalButton.addEventListener('click', function() {
            alert('Waiting payment approval');
            updateRequestStatusForUser('Payment allowed');
            updateStatusBar('Payment allowed')
        });
    }
});

function updateStatusBar(status) {
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const step3 = document.getElementById('step3');
    const step4 = document.getElementById('step4');
    const payNowButton = document.getElementById('payNowButton');
    const acceptApprovalButton = document.createElement('button');
    } // 此处存在语法错误：多余的闭合大括号

    // Remove 'current-item' class from all steps initially
    [step1, step2, step3, step4].forEach(step => step.classList.remove('current-item'));

    switch(status) {
        case 'Request Submitted':
            step1.classList.add('current-item');
            break;
        case 'Request in review':
            step1.classList.add('current-item');
            step2.classList.add('current-item');
            break;
        case 'Request approved':
            step1.classList.add('current-item');
            step2.classList.add('current-item');
            step3.classList.add('current-item');
            document.querySelector('.status-container').appendChild(acceptApprovalButton);
            break;
        case 'Request denied':
            step1.classList.add('current-item');
            step2.classList.add('current-item');
            step3.classList.add('current-item');
            step3.querySelector('.progress-label').textContent = 'Request Denied';
            break;
        case 'Payment allowed':
            step1.classList.add('current-item');
            step2.classList.add('current-item');
            step3.classList.add('current-item');
            step4.classList.add('current-item');
            payNowButton.style.display = 'block';
            break;
        default:
            break;
    }

function updateRequestStatusForUser(status) {
    const userEmail = localStorage.getItem('userEmail');
    const reservationRequests = JSON.parse(localStorage.getItem('reservationRequests')) || [];
    const requestIndex = reservationRequests.findIndex(request => request.user === userEmail);

    if (requestIndex !== -1) {
        reservationRequests[requestIndex].status = status;
        localStorage.setItem('reservationRequests', JSON.stringify(reservationRequests));
        window.location.reload();
    }
}

问题定位与修复方案 #

1. 核心语法错误 #

用户端updateStatusBar函数内存在一个多余的闭合大括号：

const acceptApprovalButton = document.createElement('button');
} // 该大括号会导致函数提前结束，后续清除类名、switch判断等逻辑完全无法执行

修复方式：直接删除这个多余的}，确保函数逻辑完整执行。

2. 实时更新优化 #

管理员修改localStorage后，用户页面不会自动感知变化，只有刷新才能读取新状态。如果需要实时更新，可在用户端的DOMContentLoaded事件中添加storage监听：

window.addEventListener('storage', function(e) {
    if (e.key === 'reservationRequests') {
        const newStatus = getReservationStatus();
        updateStatusBar(newStatus);
    }
});

这样管理员修改状态后，用户页面会自动更新状态栏。

3. 额外优化点 #

• 管理员页面修改状态后，建议同步更新表格对应行的状态文本，避免页面显示旧状态；
• updateStatusBar中创建的acceptApprovalButton未设置任何显示属性，用户无法看到按钮，需补充：

  const acceptApprovalButton = document.createElement('button');
  acceptApprovalButton.id = 'acceptApprovalButton';
  acceptApprovalButton.textContent = '确认审批';
  

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