提交表单时将localStorage值从0改为1的问题求助

Hey there! Let's get this form lockdown logic working properly for you. I see where the problem is, and I'll walk you through fixing it step by step—perfect for someone new to localStorage.

The Root of the Problem #

Your current line localStorage.setItem('competitionformlockdown', '0' || '1'); has a logical quirk in JavaScript: non-empty strings are always "truthy". So '0' || '1' will always evaluate to '0' (since the first truthy value is returned). That's why no matter when you run this line, it only ever saves '0' to localStorage—even after form submission.

Step 1: Initialize the Lock Status on Page Load #

First, we need to make sure the lock starts at '0' when the page loads, but also preserves the saved value if the user refreshes. Add this code to run when the DOM is ready:

// Run this when the page finishes loading
document.addEventListener('DOMContentLoaded', function() {
  // Check if the lock key exists in localStorage
  const existingLock = localStorage.getItem('competitionformlockdown');
  
  // If it doesn't exist, initialize it to '0'
  if (!existingLock) {
    localStorage.setItem('competitionformlockdown', '0');
  }
  
  // Optional: Lock the form immediately if the status is '1' (for refreshes)
  const lockStatus = localStorage.getItem('competitionformlockdown');
  if (lockStatus === '1') {
    document.getElementById('your-form-id').disabled = true;
    // Or hide the form, show a message, etc.—whatever your UI needs
  }
});

Replace your-form-id with the actual ID of your form element.

Step 2: Toggle the Lock on Form Submission #

Next, we'll add a submit event listener to your form that changes the lock status to '1' when the form is submitted:

// Get your form element
const competitionForm = document.getElementById('your-form-id');

// Add a submit handler
competitionForm.addEventListener('submit', function(e) {
  // Optional: Prevent default form submission if you're handling it via AJAX
  // e.preventDefault();
  
  // Update the lock status to '1'
  localStorage.setItem('competitionformlockdown', '1');
  
  // Optional: Disable the form right away so users can't submit again
  this.disabled = true;
  
  // If you didn't prevent default, the form will submit normally after this
});

How to Debug & Verify #

To make sure this works, you can check localStorage directly in your browser's dev tools:

• Press F12 to open DevTools
• Go to the Application tab
• Expand Local Storage in the left sidebar and select your site's domain
• You'll see the competitionformlockdown key—its value should change from '0' to '1' after form submission.

That's it! This setup will initialize the lock to '0' on first load, persist the value across page refreshes, and switch it to '1' once the form is submitted.

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