如何在存入localStorage前合并复选框值，实现指定格式存储？

It looks like your current code is appending individual checkbox values to the stored array each time you save, instead of adding a single space-separated string per save operation. Here's how to fix that:

Corrected Code Example #

<body>
  <div class="container">
    <input type="checkbox" class="checks" value="A"> A<br>
    <input type="checkbox" class="checks" value="B"> B<br>
    <input type="checkbox" class="checks" value="C"> C<br>
    <button id="saveBtn">Save</button>
  </div>

  <script>
    document.getElementById('saveBtn').addEventListener('click', function() {
      // Step 1: Collect all checked checkbox values
      const checkedCheckboxes = document.querySelectorAll('.checks:checked');
      const checkedValues = Array.from(checkedCheckboxes).map(checkbox => checkbox.value);
      
      // Step 2: Convert values to a single space-separated string
      const saveString = checkedValues.join(' ');
      
      // Step 3: Retrieve existing saved entries from localStorage (or empty array if none)
      let savedEntries = JSON.parse(localStorage.getItem('checkSelections')) || [];
      
      // Step 4: Add the new string to the entries array
      savedEntries.push(saveString);
      
      // Step 5: Save the updated array back to localStorage
      localStorage.setItem('checkSelections', JSON.stringify(savedEntries));
      
      // Optional: Log to verify the result
      console.log('Current saved entries:', savedEntries);
    });
  </script>
</body>

Key Changes & Explanation #

1. Join checked values into a single string: Instead of pushing individual values to the array (which caused duplicate entries), we use checkedValues.join(' ') to create a single string like "A B" or "A B C".
2. Store an array of save history: Each time you click save, one new string entry is added to the array. This gives you the exact format you want: ["A B", "A B C"].
3. Consistent storage key: I used checkSelections as the localStorage key for clarity, but you can replace it with your original key if you prefer—just make sure to use the same key for both getting and setting data.

Important Note #

If you already have old, incorrectly formatted data in localStorage, clear it first to avoid mixing formats. You can do this via your browser's dev tools (Application tab > LocalStorage) or run localStorage.removeItem('checkSelections') (replace with your original key) in the console once.

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