如何让修改后的innerHTML及元素内容在页面刷新后保持更改？

Hey there! Let's break down why your changes vanish when you refresh the page and fix this step by step.

Why Your Changes Disappear #

When you modify an element's innerHTML with JavaScript, those changes only live in the browser's temporary memory. The moment you refresh, the browser reloads your original HTML file from scratch—wiping out all those in-memory edits. To keep changes after a refresh, you need to save the data somewhere persistent. For a beginner, localStorage is perfect: it stores data directly in the user's browser, no server needed.

Updated Solution Code #

Here's how to adjust your code to save changes to localStorage and automatically load them when the page opens:

Modified JavaScript #

// Load saved data when the page finishes loading
function loadSavedData() {
  // Restore saved movie name (if it exists)
  const savedMovieName = localStorage.getItem('movieName');
  if (savedMovieName) {
    document.getElementById('namemovie1').innerHTML = savedMovieName;
    // Sync the input field with the saved value (optional but user-friendly)
    document.getElementById('savenamemovie').value = savedMovieName;
  }

  // Restore saved genre (if it exists)
  const savedMovieGenre = localStorage.getItem('movieGenre');
  if (savedMovieGenre) {
    document.getElementById('genremovie1').innerHTML = savedMovieGenre;
    document.getElementById('savegenremovie').value = savedMovieGenre;
  }
}

// Save movie name to page and localStorage
function saveea() {
  const changename = document.getElementById('savenamemovie').value;
  document.getElementById('namemovie1').innerHTML = changename;
  // Store the value in localStorage
  localStorage.setItem('movieName', changename);
}

// Save movie genre to page and localStorage
function saveeb() {
  const changegenre = document.getElementById('savegenremovie').value;
  document.getElementById('genremovie1').innerHTML = changegenre;
  // Store the value in localStorage
  localStorage.setItem('movieGenre', changegenre);
}

// Set up everything once the page is fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Attach click listeners to save buttons
  const savea = document.getElementById('save3');
  if (savea) savea.addEventListener('click', saveea);

  const saveb = document.getElementById('save4');
  if (saveb) saveb.addEventListener('click', saveeb);

  // Load any saved data right away
  loadSavedData();
});

What Changed? #

• Added loadSavedData(): This checks localStorage for previously saved values and updates your page elements/input fields when the page loads.
• Modified saveea() and saveeb(): Now they not only update the page but also store the input values in localStorage using localStorage.setItem().
• Wrapped everything in DOMContentLoaded: This ensures your JavaScript only runs after all HTML elements are loaded, preventing "element not found" errors.

Full HTML Section (With Inputs Included) #

I noticed your HTML was cut off—here's the complete movie box section to match your code:

<section id="boxes">
  <div class="container"> <!-- Fixed the class name: removed the leading dot -->
    <div id="annihilation" class="moviebox">
      <a class="moviea"><img src="../img/movie1.jpg"></a>
      <h3 id="namemovie1">Annihilation</h3>
      <input type="text" id="savenamemovie" placeholder="Enter new movie name">
      <button id="save3">Save Movie Name</button>
      
      <p id="genremovie1">Sci-Fi/Thriller</p>
      <input type="text" id="savegenremovie" placeholder="Enter new genre">
      <button id="save4">Save Genre</button>
    </div>
  </div>
</section>

Quick Notes #

• localStorage stores data as strings, so for more complex data (like objects), you'd use JSON.stringify() and JSON.parse(), but plain text works great here.
• Data stays in localStorage until the user clears their browser cache or you delete it with localStorage.removeItem('movieName').

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