实现点击按钮生成随机背景色并通过localStorage保存刷新后保留

Got it, let's get your background color to stick between page reloads! The main missing piece here is reading the saved color from localStorage when the page first loads—right now you're only saving it when the button is clicked, but not applying it on initial load. Let's clean up the code and add that functionality:

Key Fixes & Improvements #

• Add an on-load check to pull the saved color from localStorage and apply it immediately
• Merge your separate click handlers (native JS + jQuery) into one to avoid duplication
• Save the exact hex color we generate instead of reading from the style property (which sometimes returns RGB format, causing inconsistencies)

Updated Full Code #

// Get elements once on page load
const link = document.getElementById("bglink");
const output = document.getElementById("output");

// Reusable function to apply a color and update display
function applyColor(color) {
  document.body.style.backgroundColor = color;
  // Convert hex to rgba for output (matches your original logic)
  const rgbColor = color.replace('#', '');
  const r = parseInt(rgbColor.substring(0,2), 16);
  const g = parseInt(rgbColor.substring(2,4), 16);
  const b = parseInt(rgbColor.substring(4,6), 16);
  const rgbaString = `rgba(${r}, ${g}, ${b})`;
  output.textContent = `${color} - ${rgbaString}`;
}

// Apply saved color when page loads
window.addEventListener('load', () => {
  const savedColor = localStorage.getItem("bgcolor");
  if (savedColor) {
    applyColor(savedColor);
  }
});

// Handle button click for random color
link.addEventListener("click", () => {
  const newColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  // Apply the new color to the page
  applyColor(newColor);
  // Save the color to localStorage
  localStorage.setItem("bgcolor", newColor);
  alert(`Background colour ${newColor} saved in localStorage`);
});

What's Different? #

1. Reusable applyColor function: This keeps code clean by handling both initial load and button click color application in one place, avoiding repetition.
2. Page load listener: When the window finishes loading, we check if there's a saved color in localStorage. If found, we apply it right away so the color persists across reloads.
3. Unified click handler: We removed the duplicate jQuery click event and combined all logic into one native JS handler for consistency.
4. Consistent storage: We save the exact hex color we generate (newColor) instead of reading from document.body.style.backgroundColor—this avoids issues where the style property might return an RGB string instead of hex.

Now when you close or reload the page, the last color you picked will be there waiting for you!

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