3

Estoy haciendo una aplicación para buscar series a través de la API de tvMaze la cual me devuelve un objeto JSON con todos los Shows que tienen en su base de datos. Por asunto de performance quiero que los datos se guarden en localStorage pero entonces solo se me guarda el primer elemento de la lista y en consola no tengo ningun error.

$.ajax('http://api.tvmaze.com/shows')
			.then(function (shows) { //Promesa
				localStorage.shows = JSON.stringify(shows);
				//JSON.stringify() convierte un String a JSON
				renderShows(shows);
			});

Consulta de Datos Guardados en localStorage

3
  • ¿Que función realiza el método renderShows(shows)? En principio, lo guarda todo bien en localStorage cuando lo he probado. ¿Y con qué navegador lo estás probando? Mi prueba ha sido con Google Chrome, y funciona. Commented el 16 ene. 2017 a las 13:40
  • Solo para aclarar, el uso de dot notation, localStorage.shows es válido, más no recomendado. Puede intervenir con funciones nativas del objeto tipo Storage. Por ejemplo, que pasa si quieres declarar una llave nombrada length, localStorage.length sería sobreescrito y causaría inconsistencias en el código. Es mejor utilizar los métodos proporcionados por el API por cuestiones de seguridad y consistencia.
    – Ricky Ruiz
    Commented el 16 ene. 2017 a las 17:07
  • @cnbandicoot la función renderShows es la que contiene el template de los Shows que se muestran en la aplicación. Aqui puedes verla funcionando (sin el local storage) cornelioweb.com/tvify Commented el 17 ene. 2017 a las 15:12

1 respuesta 1

3

La manera de guardar datos en localStorage/sessionStorage es por medio de setItem, el cual acepta dos parámetros:

  • clave (identifica a una entrada)
  • valor en string

Ten en cuenta localStorage y sessionStorage no guardan sus propiedades directamente en el objeto mismo, si no que lo guarda en el objeto Storage que tiene dentro.

Tu código corregido:

$.getJSON('https://api.tvmaze.com/shows')
  .then(function (shows) {
    localStorage.setItem('shows', JSON.stringify(shows));
  });

...
let shows = JSON.parse(localStorage.getItem('shows'));
console.log(shows.length); // 240
2
  • Gracias! ahora está funcionando pero tengo una inquietud. localStorage está almacenando todos los shows pero sigo teniendo un tiempo de espera al cargar la aplicación. Esto es normal o realmente los datos no se están cargando de localStorage? Puedes ver la aplicación funcionando en: cornelioweb.com/tvify Commented el 17 ene. 2017 a las 15:42
  • Si inspeccionas el documento, en la pestaña Network, verás que las imágenes son las que tardan más; de hecho, hay unas 4 o 5 imágenes cuyo tiempo de carga son más de 1s. Podrías implementar un lazy loading en las imágenes, para cargar las imágenes post carga del documento. Lee sobre el tema, si necesitas ayuda abre otra publicación. Saludos.
    – gugadev
    Commented el 17 ene. 2017 a las 17:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.