¿Qué es localStorage?

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:33

¿Qué es localStorage?

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Clase 18 de 24

Clase 18 / 24

Comentarios (24)24 comentarios

Rubén Ernesto Aragón Gil

Hace 4 años

Orlando Rodriguez

Hace 4 años

Primero creo la variable con localStorage

localStorage.setItem('record', 0);

Luego la funcion

function showRecord(){
    if(playerTime > localStorage.getItem('record')){
        localStorage.setItem('record', playerTime);
        recordView.innerText = 'Record: 🏁'+ localStorage.getItem('record');
    }
}

Orlando Rodriguez

Hace 4 años

Una pequeña correcion, en el condicional debe ser playerTime < localStorage.getItem('record')

Sebastián Caraballo Marzola

Hace 3 años

pov. eliminan a patito ![](

Raúl Adolfo Sánchez Rodríguez

Hace 3 años

Conceptos:

Alexander Florez

Hace 4 años

Para solucionar el reto hice lo siguiente: En index.html, agregue un nuevo parrafo:

<p>Record: 🏆<span id="record"></span></p>

En game.js, agregue un nuevo query selector del document y cree la variable timeRecord que va a almacenar el tiempo transcurrido desde el inicio del juego::

const record = document.querySelector("#record");
let timeRecord

Modifique la funcion gameWin:

function gameWin(){
    console.log('GANASTE EL JUEGO');
    clearInterval(timeInterval);
    if(!localStorage.getItem('record') || timeRecord < localStorage.get('record')){
        localStorage.setItem('record', timeRecord)
        record.innerHTML = timeRecord;   
    }
}

finalmente la variable timeRecord se almacena cada vez que corre showTime() con el setInterval:

function showTime(){
    timeRecord = Date.now() - timeStart;
    timeCount.innerHTML = timeRecord;
}

Gustavo Vargas Miranda

Hace 4 años

La variable de Juan DC cuando use localStorage.removeItem

Manuel Araujo

Hace 4 años

HTML: Creo un párrafo que contenga un span para anunciar un nuevo record:

<p><span id="new_record"></span></p>

JavaScript: Ya tú habías creado una variable timePlayer. Yo creo además otra llamada puntuacion y también accedo al span del record:

let timePlayer;
let puntuacion;
const new_record = document.querySelector('#new_record');

Dentro de la función startGame, en el condicional donde verificamos que se acabaron los mapas, coloco después del llamado de la función gameWin el siguiente código:

        timePlayer = Number(spanTime.innerHTML);
        puntuacion = Number(localStorage.getItem('Record'));
        if(!puntuacion) {
            localStorage.setItem('Record', timePlayer);
        }
        else {
            if(timePlayer < puntuacion) {
                new_record.innerHTML = 'Has conseguido un nuevo record!!!';
                localStorage.setItem('Record', timePlayer);
            }
        }

Con esto, luego de terminar el juego, asigno a la variable timePlayer el número que esté en el span del tiempo que se detuvo y a la variable puntuación le asigno el valor de una variable en el localStorage.

A continuación escribo un condicional para que, si “puntuación” aún no existe (caso de la primera vez que se juega), se asigne al localStorage una variable con el valor de timePlayer; pero en caso de que “puntuación” sí existiera, que compare el valor guardado en memoria con el nuevo valor obtenido y muestre el mensaje de nuevo record en el span correspondiente si el nuevo tiempo es menor al que está guardado en memoria, y además que guarde el nuevo valor en el localStorage.

César Augusto Cortés Labrada

Hace 4 años

Para resolver los del reto hice lo siguiente:

Cree las variables globales textRecord y record.

let record;
let textRecord = document.getElementById('record');

En startGame() cree dos condicionales: El primer condicional se encarga de poner en pantalla el último record del jugador siempre que se inicie el juego sólo si el localStore es diferente de cero. El segundo pondrá en pantalla el record con valor de cero sólo en el primer juego(cuando se ejecute por primera vez el juego).

if(parseInt((localStorage.getItem('gameRecord')))){      
        textRecord.innerText = +localStorage.getItem('gameRecord');       
    }
    if(!parseInt((localStorage.getItem('gameRecord')))){
        localStorage.setItem('gameRecord', 0);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }

Por último en la función gameWin() se guarda el record en la variable 'record' y cree otros dos condicionales. Un condicional pondrá en pantalla el primer record del jugador pero sólo la primera vez que se inicie el juego. El segundo se encargará de poner el nuevo record sólo si es menor que el guardado por última vez en localStore

record = ((Date.now()-timeStart)/1000).toFixed(1);
    if(record && !(parseInt(localStorage.getItem('gameRecord')))){  
         
        localStorage.setItem('gameRecord', record);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }  
    if(record<parseInt((localStorage.getItem('gameRecord')))){

        localStorage.setItem('gameRecord', record);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }

silfredo mario

Hace 4 años

¿localStorage sigue funcionando así se borre la caché del navegador?

Juan Castro

Profesor

Hace 4 años

Correcto. Son elementos diferentes en el navegador. :D

Juan Carlos Montilla Sánchez

Hace 3 años

Es curioso porque yo intenté hacer eso mismo de borrar toda la información del navegador: historial, caché, cookies y se me eliminó, ¿el localstorage se guarda en algunas de esas tres opciones o será que había otra seleccionada que no me fijé? 👀

Iván Sergio Adamo

Hace 4 años

El patito está vacio...

Beder Danilo Casa Condori

Hace 2 años

jajaja

Raúl Adolfo Sánchez Rodríguez

Hace 3 años

Resultado ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Paso a paso

Raúl Adolfo Sánchez Rodríguez

Hace 3 años

🎮OPORTUNIDAD DE MEJORA: Tarjetas de mensajes al ganar y perder el juego ⭐⭐

Resultado
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Paso a paso

JORGE MANRIQUE CHAVARRO

Hace 3 años

Mi solución.

function gameWin() {
    const duration = (Date.now() - timeStart) / 1000;
    const timeBefore = localStorage.getItem('record');
    let record;
    let message;

    console.log('Terminaste el juego');
    clearInterval(timeInterval);

    if (!timeBefore) {
        record = duration;
    } else {
        if (duration < timeBefore) {
            record = duration;
            message = `Superaste tú record antes ${timeBefore} ahora ${duration}`;
        } else {
            record = timeBefore;
            message = `Ocupaste más tiempo`;
        }
    }

    localStorage.setItem('record', record);
    alert(`${record} - ${message}`);
}

----- ----

Hace 4 años

💪 LocalStorage para guardar en local xd <3

Frandel Corporan Rodríguez

Hace 3 años

Pues yo en gameWin utiliaria localStorage.setItem para guardar el record y creo un nuevo span en html donde imprimiria el mismo con getItem

Hector Maluy Fernandez

Hace 4 años

function showTime() {
  spanTime.innerHTML = formatTime(Date.now() - timeStart);
}

function formatTime(milisegundos) {
  const segundos = Math.floor(milisegundos / 1000);
  const minutos = Math.floor(segundos / 60);
  const horas = Math.floor(minutos / 60);

  return `${horas} horas ${minutos} minutos ${segundos} segundos`;
}

Matias Ezequiel Rivero

Hace 4 años

Hola, comparto la solución que implementé.

variable global para guardar el record.

let record = localStorage.getItem('record');

en la función startGame para renderizar el record guardado.

spanRecord.innerText = localStorage.getItem('record');

condicional en finishGame para registrar el record o nuevo record.

function finishGame() {
    console.log('terminaste el juego, tremendo ganador sos!!');
    clearInterval(timeInterval);
    if(!record) {
        record = timePlayer;
        localStorage.setItem('record', record);
    };
    if(timePlayer < record) {
        record = timePlayer;
        localStorage.setItem('record', record);
    };
    spanRecord.innerText = localStorage.getItem('record');
};

Muchas gracias, saludos.

Uriel Solis Salinas

Hace 4 años

Apuntes de la clase:

  "localStorage" sirve solamente si se esta ejecutando el código JS en un navegador web o que se ejecute junto un HTML.
  Esto es el almacenamiento local en el navegador, es decir, se le pide al navegador que guarde alguna información por ti.

  - localStorage.getItem es para leer alguna información que tengamos dentro de localStorage. 
    Ejemplo: localStorage.getItem("Nombre variable").
  - localStorage.setItem es para guardar una variable por primera vez.
    Ejemplo: localStorage.setItem("Variable a guardar", "Valor de la variable").
  - localStorage.removeItem borra las variables guardadas en el   navegador. 
    Ejemplo: localStorage.removeItem("Nombre variable").

Fabio Escobar

Hace 4 años

Asi lo implemente yo:

function gameWin() {
	console.log("TERMINASTE EL JUEGO!");
	if (timePlayer < localStorage.puntaje) {
		localStorage.setItem("puntaje", timePlayer);
	}

	clearInterval(timeInterval);
}

Eliezer Hernandez

Hace 4 años

Si requieren determinar el menor de dos números, puedes utilizar el método Math.min(numero1,numero2).

function showRecord(){
    if(playerTime > localStorage.getItem('record')){
        localStorage.setItem('record', playerTime);
        recordView.innerText = 'Record: 🏁'+ localStorage.getItem('record');
    }
}

function gameWin(){
    console.log('GANASTE EL JUEGO');
    clearInterval(timeInterval);
    if(!localStorage.getItem('record') || timeRecord < localStorage.get('record')){
        localStorage.setItem('record', timeRecord)
        record.innerHTML = timeRecord;   
    }
}

        timePlayer = Number(spanTime.innerHTML);
        puntuacion = Number(localStorage.getItem('Record'));
        if(!puntuacion) {
            localStorage.setItem('Record', timePlayer);
        }
        else {
            if(timePlayer < puntuacion) {
                new_record.innerHTML = 'Has conseguido un nuevo record!!!';
                localStorage.setItem('Record', timePlayer);
            }
        }

if(parseInt((localStorage.getItem('gameRecord')))){      
        textRecord.innerText = +localStorage.getItem('gameRecord');       
    }
    if(!parseInt((localStorage.getItem('gameRecord')))){
        localStorage.setItem('gameRecord', 0);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }

record = ((Date.now()-timeStart)/1000).toFixed(1);
    if(record && !(parseInt(localStorage.getItem('gameRecord')))){  
         
        localStorage.setItem('gameRecord', record);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }  
    if(record<parseInt((localStorage.getItem('gameRecord')))){

        localStorage.setItem('gameRecord', record);
        textRecord.innerText = +localStorage.getItem('gameRecord');
    }  

function gameWin() {
    const duration = (Date.now() - timeStart) / 1000;
    const timeBefore = localStorage.getItem('record');
    let record;
    let message;

    console.log('Terminaste el juego');
    clearInterval(timeInterval);

    if (!timeBefore) {
        record = duration;
    } else {
        if (duration < timeBefore) {
            record = duration;
            message = `Superaste tú record antes ${timeBefore} ahora ${duration}`;
        } else {
            record = timeBefore;
            message = `Ocupaste más tiempo`;
        }
    }

    localStorage.setItem('record', record);
    alert(`${record} - ${message}`);
}

function showTime() {
  spanTime.innerHTML = formatTime(Date.now() - timeStart);
}

function formatTime(milisegundos) {
  const segundos = Math.floor(milisegundos / 1000);
  const minutos = Math.floor(segundos / 60);
  const horas = Math.floor(minutos / 60);

  return `${horas} horas ${minutos} minutos ${segundos} segundos`;
}

function finishGame() {
    console.log('terminaste el juego, tremendo ganador sos!!');
    clearInterval(timeInterval);
    if(!record) {
        record = timePlayer;
        localStorage.setItem('record', record);
    };
    if(timePlayer < record) {
        record = timePlayer;
        localStorage.setItem('record', record);
    };
    spanRecord.innerText = localStorage.getItem('record');
};

  "localStorage" sirve solamente si se esta ejecutando el código JS en un navegador web o que se ejecute junto un HTML.
  Esto es el almacenamiento local en el navegador, es decir, se le pide al navegador que guarde alguna información por ti.

  - localStorage.getItem es para leer alguna información que tengamos dentro de localStorage. 
    Ejemplo: localStorage.getItem("Nombre variable").
  - localStorage.setItem es para guardar una variable por primera vez.
    Ejemplo: localStorage.setItem("Variable a guardar", "Valor de la variable").
  - localStorage.removeItem borra las variables guardadas en el   navegador. 
    Ejemplo: localStorage.removeItem("Nombre variable").

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?

¿Qué es localStorage?