<div class="one"> 
  <h1 style="text-align: center;">Please sign up</h1>
  <input type="text" placeholder="First name" id='firstName'>
  <input type="text" placeholder="Last name" id='lastName'>
  <input type="text" placeholder="Email addres" id='emailAdres'>
  <input type="password" placeholder="Password" id='password'>
  <button id='SignUp' onclick="signUp()">Sign up</button>
</div>
<div class="one" id="debug"></div>

* {
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.one,
.SignInNow {
  margin-top: 50px;
  width: 20vw;
  height: 20em;
}
input,
button {
  width: 15vw;
  height: 30px;
  margin-top: 1em;
}
#SignUp {
  background-color: blue;
  color: white;
}

const lsKey = "persons";
const data = JSON.parse(localStorage.getItem(lsKey)) || [];
let id = 0;
function signUp() {
  addUser({
    firstName: firstName.value,
    lastName: lastName.value,
    email: emailAdres.value,
    password: password.value,
    id: id
  });
  console.log(data);
  localStorage.setItem(lsKey, JSON.stringify(data));
  logLS();

  firstName.value = "";
  lastName.value = "";
  emailAdres.value = "";
  password.value = "";
}

function addUser(user) {
  data.push(user);
  id++;
}

const debug = document.getElementById("debug");
const logLS = () => debug.innerText = localStorage.getItem(lsKey);
logLS();