Ejemplo JSON

 

<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.

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos