let movies = [];
const addMovie = (ev) => {
  ev.preventDefault();
  let movie = {
    id: Date.now(),
    title: document.getElementById('title').value,
    year: document.getElementById('yr').value
  }
  movies.push(movie);
  document.forms[0].reset();
  console.warn('added', {
    movies
  });
  let pre = document.querySelector('#msg pre');
  pre.textContent = '\n' + JSON.stringify(movies, '\t', 2);
  var SaveInfo = JSON.parse(localStorage.getItem('MyMovieList'));
  document.getElementById("text").innerHTML = SaveInfo;
  console.log(SaveInfo[0].id);
  localStorage.setItem('MyMovieList', JSON.stringify(movies));
}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('btn').addEventListener('click', addMovie);
  }

);

<form>
  <div class="formBox">
    <label for="title">Movie</label>
    <input type="text" id="title" placeholder="Title" />
  </div>
  <div class="formBox">
    <label for="yr">Year</label>
    <input type="number" id="yr" placeholder="Year" />
  </div>
  <div class="formBox">
    <button id="btn">Click to Add</button>
  </div>
  <div id="msg">
    <pre></pre>
    <p id="text"></p>
  </div>
</form>