Saludos,
He indagado por allí, y me he encontrado con dos posibles soluciones:
document.cookieY con
localStorageLo más complicado (creo yo) es hacerlo sin librerias, es decir , a puro javascript (no se sí sea posible).
Estaba pensando en hacer algo tipo:
- Crear un archivo que contenga los datos de lo que se va a cargar.
- Al apretar un botón se cargué dicha partida
Pongo un simple ejemplo:
Creo un juego basico, en este ejemplo el Snake o Serpiente. Al cabo de un rato jugando decido salir.
Al volver a poner el juego mostrar un "HIGH SCORE"...
Intenté ser lo más claro posible.
Resumen: algo como el juego del T-Rex de Chrome :
chrome://dino/
Usas un objeto o lo que quieras, y lo almacenas en localStorage. Yo no usaría cookies pues están limitadas. localStorage es muy sencillo de usar y no te hace falta ninguna librería.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
let data = {score: 500, user: 'papanoel'};
localStorage.setItem('partida', JSON.stringify(data)); // localStorage almacena strings.
let save = localStorage.getItem('partida');
// comprobamos si tenemos partida guardad y la pasamos a objeto.
data = (save ? JSON.parse(save) : {score: 0});
console.log(data.score); // 500
console.log(data.user); // papanoel
Obviamente olvídate de guardar datos sensibles, puesto que tanto las cookies como el localStorage son modificables por el usuario.
Saludos
Tengo que probarlo, te comentó cualquier cosa, gracias por tu respuesta...
Yo uso strings. Obtengo los datos a guardar, los codifico y los cargo por la url con el # o pegando el string en un input.
Puedes generar un archivo, descargarlo y cargarlo también.
Gracias @#!drvy, pero, no se exactamente que hace y porque está de esta forma está parte del código:
JSON.stringify(data)
Y esta más que todo:
data = (save ? JSON.parse(save) : {score: 0});
Si me lo pudieras explicar de una manera si olé y comprensible, te lo agradecería mucho.
@XSStringManolo, no entendí muy bien tu respuesta, explicare mejor please...
Gracias a ambos y saludos...
EDITO:
Encontré un ejemplo usando JQuery:
https://platzi.com/blog/local-storage-html5/ (https://platzi.com/blog/local-storage-html5/)
Pero aún no me queda claro tu código...
JSON.stringify convierte lo que le pasas a formato JSON.
https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Objetos_globales/JSON/stringify
Así puedes almacenar un objeto o un array en el localStorage, puesto que este solo permite strings. Lo que haces en esa línea es literalmente convertir el objeto
data a JSON y almacenarlo en localStorage como
partida.
data = (save ? JSON.parse(save) : {score: 0}); A esto se le llama una condicional ternaria u operador ternario.
https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Operadores/Conditional_Operator
Literalmente se traduce a esto:
if (save == true) {
data = JSON.parse(save);
} else {
data = {score:0};
}Lo que hace es muy simple, comprueba si
save tiene un dato válido comparándolo como booleano y si es así, le asigna a la variable
data la salida de
JSON.parse, de lo contrario, le asigna un objeto con puntuación cero por defecto.
JSON.parse es lo contrario a
JSON.stringify. Convierte un string JSON a objeto/array en javascript.
https://developer.mozilla.org/es/docs/Web/javascript/Referencia/Objetos_globales/JSON/parse
CitarEncontré un ejemplo usando JQuery:
Ese ejemplo es MUY MUY malo.
1. Almacenan input del usuario de forma directa y lo muestran sin sanitizar permitiendo ejecución XSS.
2. Mezclan tanto jQuery como javascript nativo a la hora de hacer selectores. En unos lados usan
$('...') y en otros usan
getElementById. Fatal.
3. Usan tags obsoletos en HTML5.
<center> está marcado como obsoleto en HTML5.
4. Meten el jQuery en el
<head>. El jQuery siempre debe ir en el
<body> a no ser que haya alguna manqueada que te obligue a meterlo en el
<head>.
En fin... poco más se puede esperar de platzi.
Saludos
Muchísimas gracias! Me quedo claro el código ahora.. Te lo agradezco...
Saludos.!!