Отображение ввода формы на другой странице html

Question

Я новичок в javascript и манипуляциях с DOM. Итак, у меня есть эта форма, которую я создал в основном для получения имен игроков. Я хочу получить имена игроков и отобразить их на странице игр, как только они будут перенаправлены после нажатия на кнопку. Он не отображает строку кода и возвращает ошибку:

(VM4444: 1 Uncaught ReferenceError: player1 не определен в: 1: 1).

function next() {
  var player1 = document.getElementById('play1').value;
  var player2 = document.getElementById('play2').value;
  if (player1 === '' || player2 === '') {
    document.getElementById("error").style.color = "red";
    document.getElementById("error").innerHTML = "Please enter both names";
  } else {
    location.href = "game.html";
  }
  document.getElementById('name1').innerHTML = player1.value;
  document.getElementById('name2').innerHTML = player2.value;
  console.log(player1, player2);
}

<div class="col-lg-4 col-md-4 col-sm-12 form">
  <form>
    <small class="form-text text-muted">We'll never share your details with anyone else.</small>
    <div class="form-group">
      <label for="player1">Player 1</label>
      <input type="text" class="form-control" id="play1" aria-describedby="play1help">

    </div>
    <div class="form-group">
      <label for="player1">Player 2</label>
      <input type="text" class="form-control" id="play2" aria-describedby="play1help">
    </div>
  </form>
  <button class="btn btn-lg btn-primary btn-block mt-3" onclick="next();">Start</button>
  <a href="C:\Users\Slim\Documents\webdevelopment\dicee\game.html" alt=""></a>
</div>

Answer 1

Используя localStorage, вы можете легко добиться этого,

localStorage["key"] = value;

На следующей странице вы можете получить значение, используя

value = localStorage["key"];

Первая страница

function next() {
  var player1 = document.getElementById('play1').value;
  var player2 = document.getElementById('play2').value;
  if (player1 === '' || player2 === '') {
    document.getElementById("error").style.color = "red";
    document.getElementById("error").innerHTML = "Please enter both names";
  } else {
    location.href = "game.html";
  }
  document.getElementById('name1').innerHTML = player1.value;
  document.getElementById('name2').innerHTML = player2.value;
  localStorage["player1"] = player1;
  localStorage["player2"] = player2;
  console.log(player1, player2);
}

Следующая страница

function getPlayer() {
      player1 = localStorage["player1"];
      player2 = localStorage["player2"];
      console.log(player1,player2)
    }