How a changed innerHTML could stay changed after page refresh?

Question

When you enter anything in input fields, it would be replaced(changed) as intended, and i don't know how could they stay that way(changed based on input value) after page reload...I tried many options form here and from other forums but no help at all. please help i am newbie to this stuff.

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>

Would require you set stuff on the sever or remember it in local storage and replace it on page load. — epascarello, Mar 23 '18 at 16:33

score 1 · Accepted Answer · edited Mar 23 '18 at 16:51

1

You could store your values in localStorage and update it on keyup to always be the correct value.

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

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

edited Mar 23 '18 at 16:51

Steve Padmore

1,710
1
12
18

answered Mar 23 '18 at 16:33

Sebastian Speitel

7,166
2
19
38

How a changed innerHTML could stay changed after page refresh?

1 Answers1