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>Entonces tengo 2 entradas, cuyos valores van al almacenamiento local como una matriz. Entonces, quiero verificar si hay un nuevo objeto agregado a la matriz cuando hago clic en enviar, luego, si es así, quiero tomar la propiedad/valores del objeto de esa matriz y ponerlo en un elemento en html.