Web开发新手求助：实现按钮点击永久禁用且刷新后状态保持

Hey there! Let's solve this problem together. Since you're working with a single index.html file and need button states to stick around even after a page refresh, we'll use the browser's built-in localStorage—it's perfect for storing small bits of data locally without needing any backend setup.

Here's a complete, ready-to-use implementation you can drop right into your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Persistent Disabled Buttons</title>
    <style>
        /* Optional basic styling to make buttons look clean */
        .button-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding: 25px;
            max-width: 450px;
            margin: 20px auto;
        }
        button {
            padding: 12px;
            font-size: 17px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover:not(:disabled) {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            color: #666666;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="button-grid">
        <!-- 9 buttons with unique IDs to track each individually -->
        <button id="btn1">Button 1</button>
        <button id="btn2">Button 2</button>
        <button id="btn3">Button 3</button>
        <button id="btn4">Button 4</button>
        <button id="btn5">Button 5</button>
        <button id="btn6">Button 6</button>
        <button id="btn7">Button 7</button>
        <button id="btn8">Button 8</button>
        <button id="btn9">Button 9</button>
    </div>

    <script>
        // Set up button states when the page finishes loading
        document.addEventListener('DOMContentLoaded', () => {
            // Grab all buttons with IDs starting with "btn"
            const buttons = document.querySelectorAll('[id^="btn"]');
            
            buttons.forEach(button => {
                // Check if this button was marked as disabled in localStorage
                const isDisabled = localStorage.getItem(button.id) === 'true';
                if (isDisabled) {
                    button.disabled = true;
                }

                // Add click behavior to each button
                button.addEventListener('click', () => {
                    // Disable the button right away
                    button.disabled = true;
                    // Save the disabled state to localStorage so it persists
                    localStorage.setItem(button.id, 'true');
                });
            });
        });
    </script>
</body>
</html>

How This Works: #

• localStorage: This browser feature stores key-value pairs permanently (even if you close the tab or browser). We use each button's unique ID as the key, and store 'true' once it's disabled.
• Page Load Setup: When the page loads, we loop through every button, check its stored state, and disable it if it was marked as such before.
• Click Handler: As soon as a button is clicked, we disable it immediately and save that state to localStorage—so the next time you refresh, it stays disabled.

Quick Tips: #

• If you ever need to reset all button states, open your browser's developer console (F12 > Console tab) and run localStorage.clear().
• The styling is totally optional—tweak the CSS to match your website's look and feel.
• This works seamlessly with Caddy Server since it's just a static HTML file; no server-side code is required at all.

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