Etiqueta: localstorage

Mini ejercicio JSON

Vamos a tener una web con dos cajitas:
Num1:[___] Num2:[___]
[Calcular]

El botón calcular nos calcula la suma y guarda en el localStorage un elemento llamado ‘resultado’ que es un objeto con la siguiente info:
{
num1: (valor del numero1),
num2: (valor del numero2),
suma: (valor de la suma)
}

No hace falta hacer nada más: recuperar, calcular, guardar en localStorage


	Num1: <input type="number" id="numInput1">
	Num2: <input type="number" id="num2">
	<button id="calcular">Calcular</button>
	<script src="js/local.js"></script>

document.getElementById('calcular').addEventListener('click', calcular)

function calcular () {
  const numero1 = parseFloat(document.getElementById('numInput1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  console.log(numero1, num2)
  const suma = numero1 + num2
  // Creo el objeto
  const resultado = {
	  num1: numero1,
	  num2: num2, // Si estás poniendo lo mismo 'num2' ¿Esto no da un error? No, porque en la parte izquierda es el NOMBRE de la propiedad y en la derecha es el VALOR de la variable
	  suma: suma // Yo recomiendo que los nombres sean los mismos en todo el recorrido, nos evita errores
  }
  console.log(resultado)
  // Lo guardo convertido en JSON
  localStorage.setItem('resultado', JSON.stringify(resultado))
}

Ejercicio local Storage

Tenemos una web con un input para poner una cantidad y un botón que pone sumar.
Cada vez que le demos al botón nos suma la cantidad en una variable almacenada en el localStorage y nos la muestra en un h1.

Cuando carguemos la página, si ya hay valores en el localStorage mostramos ese valor en el h1

<div id="contenedor" class="container ">
		Cantidad: <input type="number" id="cantidad">
		<button class="btn btn-success" id="sumar">Sumar</button>
		<button class="btn btn-success" id="borrar">Borrar</button>
		<h1 id="resultado"></h1>
	</div>
	<script src="js/test.js"></script>

document.getElementById('sumar').addEventListener('click', sumar)
document.getElementById('borrar').addEventListener('click', borrar)
document.addEventListener('DOMContentLoaded', function (event) {
  if (localStorage.getItem('cantidad') != null) {
    document.getElementById('resultado').innerHTML = localStorage.getItem('cantidad')
  }
})

function sumar () {
  // Recupero el valor del input
  let cantidad = parseFloat(document.getElementById('cantidad').value)
  if (isNaN(cantidad)) {
    cantidad = 0
  }
  // Recupero el valor de localStorage
  let cantidadAlmacenada = parseFloat(localStorage.getItem('cantidad'))
  // Si en el localStorage no hay número, bien porque no existe la variable
  // Bien porque existe pero no es un número
  // La pongo a 0
  if (isNaN(cantidadAlmacenada)) {
    cantidadAlmacenada = 0
  }
  // Calculo la suma
  const suma = cantidad + cantidadAlmacenada
  // La muestro en el H1 porque me lo piden
  document.getElementById('resultado').innerHTML = suma
  // ALmaceno el resultado en el localStorage para que quede registrado
  // En setItem tengo 'nombre de la variable', valor de la variable
  localStorage.setItem('cantidad', suma)
}

function borrar () {
  // Funcionaría localStorage.removeItem('cantidad')
  // Lo más lógico según mi estructura sería lo siguiente
  localStorage.setItem('cantidad', 0)
}

Ejemplo de uso de localStorage

	<button id="poner">Pon Storage</button>
		<button id="obtener">Obtener Storage</button>
		<button id="eliminar">Eliminar Storage</button>
		<script src="js/test.js"></script>

document.getElementById('poner').addEventListener('click', poner)
document.getElementById('obtener').addEventListener('click', obtener)
document.getElementById('eliminar').addEventListener('click', eliminar)

localStorage.clear()

function poner () {
  localStorage.setItem('edad', 50)
}
function obtener () {
  const edad = localStorage.getItem('edad')
  alert(edad)
}
function eliminar () {
  localStorage.removeItem('edad')
}