<div id="contenedor" class="container "> Nombre:<input type="text" id="nombre"> Edad:<input type="text" id="edad"> Sueldo:<input type="number" id="sueldo"> <button id="guardar" class="btn btn-success">Guardar datos</button> </div> <script src="js/test.js"></script>
document.getElementById('guardar').addEventListener('click', guardar)
// Recupero el valor del localStorage
const guardado = localStorage.getItem('empleado')
// SI hay datos
if (guardado != null) {
console.log(guardado)
// Convierto la cadena en objeto (parse)
const empleado = JSON.parse(guardado)
console.log(empleado)
// Pongo los datos en el HTML
document.getElementById('nombre').value = empleado.nombre
document.getElementById('edad').value = empleado.edad
document.getElementById('sueldo').value = empleado.sueldo
}
function guardar () {
// Recupero los datos del HTML
const nombre = document.getElementById('nombre').value
const edad = document.getElementById('edad').value
const sueldo = document.getElementById('sueldo').value
// Creo un objeto con esos datos
const empleado = {
nombre: nombre,
sueldo: sueldo,
edad: edad
}
// Lo convierto a cadena (stringify) y lo guardo en el localStorage
localStorage.setItem('empleado', JSON.stringify(empleado))
}
See the Pen
qBqjOYz by Juan Pablo Fuentes (@juan-pablo-fuentes)
on CodePen.