Getting [Object Object] in local storage

I am currently busy with a registration form, I got everything set up nicely, however, I am running into 2 local storage issues.

1. I get the VM6858:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) error

2. When I click register, something stores in the local storage, but not sure what.

   MEDevel.com: Open-source for Healthcare and Education

   Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

   Visit Medevel

The reason I want to make the information stored in local storage is so that it can be checked when the user signs in on the sign in page.

I am aware PHP is a good combination to do this for server-side, but for now, I am just focusing on storing it on the web browser, this is not being used for people to actually register this is just to practice using local storage in various ways.

HTML

<main>
  <div class="heading">
         <h1>User Registration</h1>
    </div>

    <form class="form-container">
      <ul>
      <li><label for="name">Name</label>
        <input class="name" type="text" name="name" required />
      </li>

      <li><label for="surname">Surname</label>
        <input class="surname" type="text" name="surname" required />
      </li>

      <li><label for="phone">Phone</label>
    <input class="phone" type="text" name="phone" />
      </li>

      <li><label for="email">Email</label>
      <input class="email" type="text" name="email" required /></li>
      

      <li><label for="password">Password</label>
      <input class="password" type="text" name="password" required /></li>
     
</ul>
      <button class="reg" onclick="validate()">Register</button>
    </form>
</main>

JS

//storage key
let STORAGE_KEY ="store-user-reg"


//generate ID
const createId = () =>
  `${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;

//get html elements

  const formEl = {
    id:createId(),
    name: document.querySelector(".name"),
    surname: document.querySelector(".surname").value,
    phone: document.querySelector(".phone").value,
    email: document.querySelector(".email").value,
    password: document.querySelector(".password").value,
  };


//Array for stored registered users
usersArray = JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];

//function to set local storage
function store(){
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(usersArray));
}

//register button clicked
function validate() {

let name = formEl.name.value;
let surname = formEl.name.value;
let email = formEl.name.value;
let password = formEl.name.value;


  if (!name) {
    alert("Please fill in name");
  }

  if (!surname) {
    alert("Please fill in Surname");
  }

  if (!email) {
    alert("Please fill in email");
  }

  if (!password) {
    alert("Please create a password");
  }

  usersArray.push(formEl);
  store();
  
}

I added screenshots so you can see both errors

>Solution :

You are creating your formEl object on page load, and all the fields will be blank, you need to move your declaration inside of your validate() function to actually populate formEl with the data you want.

The other issue is what Ryan mentioned, I suggest clearing your local storage.

Updating the validate function to:

function validate() {
    const formEl = {
      id: createId(),
      name: document.querySelector(".name").value,
      surname: document.querySelector(".surname").value,
      phone: document.querySelector(".phone").value,
      email: document.querySelector(".email").value,
      password: document.querySelector(".password").value,
    };
    if (!formEl.name) {
      alert("Please fill in name");
    }

    if (!formEl.surname) {
      alert("Please fill in Surname");
    }

    if (!formEl.email) {
      alert("Please fill in email");
    }

    if (!formEl.password) {
      alert("Please create a password");
    }
    usersArray.push(formEl);
    store();
  }

should also help!