HTML API de almacenamiento web
HTML almacenamiento web; mejor que las galletas.
¿Qué es el almacenamiento web HTML?
Con el almacenamiento web, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario.
Antes de HTML5, los datos de las aplicaciones debían almacenarse en cookies, incluidas en cada solicitud del servidor. El almacenamiento web es más seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web.
A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.
El almacenamiento web es por origen (por dominio y protocolo). Todas las páginas, desde un mismo origen, pueden almacenar y acceder a los mismos datos.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con Web Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objetos de almacenamiento web HTML
El almacenamiento web HTML proporciona dos objetos para almacenar datos en el cliente:
window.localStorage- almacena datos sin fecha de vencimientowindow.sessionStorage- almacena datos para una sesión (los datos se pierden cuando se cierra la pestaña del navegador)
Antes de usar el almacenamiento web, verifique la compatibilidad del navegador con localStorage y sessionStorage:
if (typeof(Storage) !== "undefined") {
// Código para localStorage/sessionStorage.
} else {
// ¡Lo siento! Sin soporte de almacenamiento web.
}
El objeto de almacenamiento local
El objeto localStorage almacena los datos sin fecha de vencimiento. Los datos no se eliminarán al cerrar el navegador y estarán disponibles al día, semana o año siguiente.
Ejemplo
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Inténtalo tú mismo »
Ejemplo explicado:
- Cree un par de nombre/valor de almacenamiento local con name="lastname" e value="Smith"
- Recupere el valor de "lastname" e insértelo en el elemento con id="result"
El ejemplo anterior también podría escribirse así:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La sintaxis para eliminar el elemento localStorage "lastname" es la siguiente:
localStorage.removeItem("lastname");
Nota: Los pares nombre/valor siempre se almacenan como cadenas. ¡Recuerda convertirlos a otro formato cuando sea necesario!
El siguiente ejemplo cuenta el número de veces que un usuario ha hecho clic en un botón. En este código la cadena de valor se convierte a un número para poder aumentar el contador:
Ejemplo
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Has hecho clic en el botón " +
localStorage.clickcount + " time(s).";
Inténtalo tú mismo »
El objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos de una sola sesión. Los datos se eliminan cuando el usuario cierra la pestaña específica del navegador.
El siguiente ejemplo cuenta el número de veces que un usuario ha hecho clic en un botón en la sesión actual:
Ejemplo
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ha hecho clic en el botón " +
sessionStorage.clickcount + " veces en esta sesión.";
Inténtalo tú mismo »
