Trying to stop the new Row from resetting after refreshing site

Question

I have created a table with HTML and JS where I will be able to add elements to the table. However, whenever I create a row in the table it resets and disappears AFTER I refresh the page, how do I prevent this?

var list1 = [];
var list2 = [];
var list3 = [];
var list4 = [];
var list5 = [];
var list6 = [];
var list7 = [];
var list8 = [];

var n = 1;
var x = 0;

function AddRow() {

  var AddRown = document.getElementById('show');
  var NewRow = AddRown.insertRow(n);

  list1[x] = document.getElementById("kamp").value;
  list2[x] = document.getElementById("hjemmelag").value;
  list3[x] = document.getElementById("resultat").value;
  list4[x] = document.getElementById("bortelag").value;
  list5[x] = document.getElementById("gHjemme").value;
  list6[x] = document.getElementById("rHjemme").value;
  list7[x] = document.getElementById("gBorte").value;
  list8[x] = document.getElementById("rBorte").value;

  var cel1 = NewRow.insertCell(0);
  var cel2 = NewRow.insertCell(1);
  var cel3 = NewRow.insertCell(2);
  var cel4 = NewRow.insertCell(3);
  var cel5 = NewRow.insertCell(4);
  var cel6 = NewRow.insertCell(5);
  var cel7 = NewRow.insertCell(6);
  var cel8 = NewRow.insertCell(7);

  cel1.innerHTML = list1[x];
  cel2.innerHTML = list2[x];
  cel3.innerHTML = list3[x];
  cel4.innerHTML = list4[x];
  cel5.innerHTML = list5[x];
  cel6.innerHTML = list6[x];
  cel7.innerHTML = list7[x];
  cel8.innerHTML = list8[x];

  n++;
  x++;


  n.preventDefault();
  x.preventDefault();
}

<center>
  <table border="4">
    <thead>
      <tr>
        <th>Kamp nr:</th>
        <td><input type="text" name="kamp" id="kamp"></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Hjemmelag</th>
        <td><input type="text" name="hjemmelag" id="hjemmelag"></td>
      </tr>
      <tr>
        <th>Resultat</th>
        <td><input type="text" name="resultat" id="resultat"></td>
      </tr>
      <tr>
        <th>Bortelag</th>
        <td><input type="text" name="bortelag" id="bortelag"></td>
      </tr>
      <tr>
        <th>Gult kort hjemmelag</th>
        <td><input type="text" name="gHjemme" id="gHjemme"></td>
      </tr>
      <tr>
        <th>Rødt kort hjemmelag</th>
        <td><input type="text" name="rHjemme" id="rHjemme"></td>
      </tr>
      <tr>
        <th>Gult kort bortelag</th>
        <td><input type="text" name="gBorte" id="gBorte"></td>
      </tr>
      <tr>
        <th>Rødt kort bortelag</th>
        <td><input type="text" name="rBorte" id="rBorte"></td>
      </tr>
      <tr id="btna">
        <td colspan="2"><input type="button" name="button" id="btn" value="Add" onclick="AddRow()"></td>
      </tr>
    </tbody>
  </table>

  <table border="8" id="show">
    <thead>
      <tr>
        <th>Kamp nr</th>
        <th>Hjemmelag</th>
        <th>Resultat</th>
        <th>Bortelag</th>
        <th>Gult kort hjemmelag</th>
        <th>Rødt kort hjemmelag</th>
        <th>Gult kort hjemmelag</th>
        <th>Rødt kort hjemmelag</th>
      </tr>
    </thead>
  </table>
</center>

Answer 1

If you do not have a server, you and you alone can see the values if you do this:

NOTE: When you copy to your server, remove the comments and this

[]; //

Also note I moved the id to the tbody

const AddRown = document.getElementById('show');
const list = []; // localStorage.getItem("list"); // get list from localStorage
// if (list) list = JSON.parse(list); // parse it into an array
document.getElementById("btn").addEventListener("click", function(e) {
  list.push({
    kamp: document.getElementById("kamp").value,
    hjemmelag: document.getElementById("hjemmelag").value,
    resultat: document.getElementById("resultat").value,
    bortelag: document.getElementById("bortelag").value,
    gHjemme: document.getElementById("gHjemme").value,
    rHjemme: document.getElementById("rHjemme").value,
    gBorte: document.getElementById("gBorte").value,
    rBorte: document.getElementById("rBorte").value
  })

  // localStorage.setItem("list", JSON.stringify(list)); // save list
  AddRown.innerHTML = list.map(item => `<tr>${
  Object.values(item).map(val => `<td>${val}</td>`).join("")
  }</tr>`).join("")

})

<center>
  <table border="4">
    <thead>
      <tr>
        <th>Kamp nr:</th>
        <td><input type="text" name="kamp" id="kamp"></td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Hjemmelag</th>
        <td><input type="text" name="hjemmelag" id="hjemmelag"></td>
      </tr>
      <tr>
        <th>Resultat</th>
        <td><input type="text" name="resultat" id="resultat"></td>
      </tr>
      <tr>
        <th>Bortelag</th>
        <td><input type="text" name="bortelag" id="bortelag"></td>
      </tr>
      <tr>
        <th>Gult kort hjemmelag</th>
        <td><input type="text" name="gHjemme" id="gHjemme"></td>
      </tr>
      <tr>
        <th>Rødt kort hjemmelag</th>
        <td><input type="text" name="rHjemme" id="rHjemme"></td>
      </tr>
      <tr>
        <th>Gult kort bortelag</th>
        <td><input type="text" name="gBorte" id="gBorte"></td>
      </tr>
      <tr>
        <th>Rødt kort bortelag</th>
        <td><input type="text" name="rBorte" id="rBorte"></td>
      </tr>
      <tr id="btna">
        <td colspan="2"><input type="button" name="button" id="btn" value="Add"></td>
      </tr>
    </tbody>
  </table>

  <table border="8">
    <thead>
      <tr>
        <th>Kamp nr</th>
        <th>Hjemmelag</th>
        <th>Resultat</th>
        <th>Bortelag</th>
        <th>Gult kort hjemmelag</th>
        <th>Rødt kort hjemmelag</th>
        <th>Gult kort hjemmelag</th>
        <th>Rødt kort hjemmelag</th>
      </tr>
    </thead>
    <tbody id="show"></tbody>
  </table>
</center>