API de almacenamiento web HTML
almacenamiento web HTML; 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 la aplicación tenían que 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 origen, pueden almacenar y acceder a los mismos datos.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el almacenamiento web.
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 caducidadwindow.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, compruebe la compatibilidad del navegador con localStorage y sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
El objeto de almacenamiento local
El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminarán cuando se cierre 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");
Ejemplo explicado:
- Cree un par de nombre/valor de almacenamiento local con nombre="apellido" y valor="Smith"
- Recupere el valor de "apellido" e insértelo en el elemento con id="resultado"
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 "apellido" es la siguiente:
localStorage.removeItem("lastname");
Nota: Los pares de nombre/valor siempre se almacenan como cadenas. ¡Recuerde 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 en 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 = "You have clicked the button " +
localStorage.clickcount + " time(s).";
El objeto sessionStorage
El sessionStorage
objeto es igual al objeto localStorage, excepto
que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la pestaña específica del navegador.
El siguiente ejemplo cuenta la cantidad 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 = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";