Una alternativa es guardar la informacion del lado del cliente ya sea con localStorage
o sessionStorage
(Web Storage
).
Para saber si un navegador soporta Web Storage
utilizamos este fragmento de código:
if (typeof(Storage) !== "undefined") {
// Si soporta Web Storage.
} else {
// Lo siento! No Soporta Web Storage tu navegador...
}
Ahora sessionStorage
es accesibles mientras dura la sesión de navegación. Los datos no son recuperables si:
- Se cierra el navegador y se vuelve a abrir.
- Se abre una nueva pestaña de navegación independiente y se sigue
navegando en esa pestaña.
- Se cierra la ventana de navegación que se estuviera utilizando y se
abre otra.
Ejemplo obtenido de w3school: Demo w3school sessionStorage
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
Esto es lo mas adaptable a mi problemática ya que no requiero que los datos se mantengan por mucho tiempo a como lo es localStorage
¿Pero qué ocurre si quisiéramos almacenar esa información más allá de una sesión y que estuviera disponible tanto si se cierra el navegador y se vuelve a abrir como si se continúa navegando en una ventana distinta de la inicial?
Esto trata de ser respondido por localStorage
. Este objeto tiene las mismas propiedades y métodos que sessionStorage
, pero su persistencia va más allá de la sesión.
Los datos no son recuperables si:
- Se limpia la cache del navegador.
Ejemplo obtenido de w3school:Demo w3school localStorage
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>