页面刷新后更改的 innerHTML 如何保持更改？

Question

当您在输入字段中输入任何内容时，它会按预期被替换（更改），我不知道他们怎么能在页面重新加载后保持这种状态（根据输入值更改）...我试过了这里和其他论坛有很多选项，但根本没有帮助。请帮助我是这个东西的新手。

var savea = document.getElementById("save3");
if (savea) {
  savea.addEventListener("click", saveea);
}

var saveb = document.getElementById("save4");
if (saveb) {
  saveb.addEventListener("click", saveeb);
}

function saveea() {
  var changename = document.getElementById("savenamemovie").value;
  document.getElementById("namemovie1").innerHTML = changename;
}

function saveeb() {
  var changegenre = document.getElementById("savegenremovie").value;
  document.getElementById("genremovie1").innerHTML = changegenre;
}

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a id="newprojection" href="../html/newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="../html/buyticket.html">Buy a ticket</a></li>
        <li><a id="newuser" href="../html/newuser.html">New user</a></li>
        <li><a id="loginbtn" href="../html/login.html">Log in</a></li>
        <li><a id="buy2" href="#">admin</a></li>
      </ul>
    </nav>
  </div>
</header>

<section id="boxes">
  <div class=".container">
    <div id="annihilation" class="moviebox">
      <a class="moviea"><img src="../img/movie1.jpg"></a>
      <h3 id="namemovie1">Annihilation</h3>
      <input id="savenamemovie" type="text" name="movietitle"><a id="save3" class="save2">SAVE</a>
      <p>Genre: <span id="genremovie1">Adventure, Fantasy</span></p>
      <input id="savegenremovie" type="text" name="movietitle"><a id="save4" class="save2">SAVE</a>
    </div>
    <div class="trailer">
      <embed src="https://www.youtube.com/embed/89OP78l9oF0" allowfullscreen="true">
    </div>
    <div class="moviebox">
      <p>Ticket Price:<span id="pricemovie1" class="boje"> 250 RSD</span></p>
      <p>Duration:<span id="durationmovie1" class="boje"> 147 min.</span></p>
      <p>Date:<span id="datemovie1" class="boje"> 25/06/18</span></p>
      <p>Time:<span id="timemovie1" class="boje"> 18:30</span></p>
      <p>Place:<span id="placemovie1" class="boje"> Arizona, Springfiled 12</span></p>
      <p>Theater:<span id="theatre1" class="boje"> A1</span></p>
      <br>
      <a id="delete">Free: 14 seats</a>
      <a id="change">Movie rated: 7.8</a>
      <a id="buy" class="buttons" href="buyticket.html">Buy a Ticket</a>
    </div>
  </div>
</section>

Answer 1

您可以将您的值存储在 localStorage 中并在 keyup 上更新它以始终是正确的值。

var input = document.getElementById("savenamemovie");

if (input) { 
    input.value = localStorage.getItem('savenamemovie') || "";
    input.addEventListener("keyup", function(){
        localStorage.setItem('savenamemovie',this.value);
    }); 
}

页面刷新后更改的 innerHTML 如何保持更改？

How a changed innerHTML could stay changed after page refresh?

html

javascript

user-input

innerhtml

page-refresh