HTML almacenamiento local, mejor que cookies .
¿Qué es HTML almacenamiento local?
Con el almacenamiento local, las aplicaciones web pueden almacenar datos localmente en el navegador del usuario.
Antes de HTML5, los datos de aplicaciones tenían que ser almacenados en cookies , incluidos en cada petición del servidor. El almacenamiento local es más segura, y grandes cantidades de datos pueden ser almacenados localmente, sin afectar el rendimiento sitio web.
A diferencia de cookies , el límite de almacenamiento es mucho más grande (at least 5MB) y la información nunca se transfiere al servidor.
El almacenamiento local es por origen (per domain and protocol) . Todas las páginas, de un origen, se pueden almacenar y acceder a los mismos datos.
El almacenamiento local y la sesión
almacenamiento web ofrece dos áreas locales diferentes de almacenamiento de almacenamiento y una sesión de almacén de los que difieren en alcance y tiempo de vida.
Datos colocados en el almacenamiento local es por origen (la combinación de protocolo, nombre de host, y número de puerto como se define en la política del mismo origen) (los datos están disponibles para todos los scripts cargados desde las páginas del mismo origen que previamente almacenados los datos) y persiste después se cierra el navegador.
almacenamiento de las sesiones es per-origen-per-window-o-ficha y se limita a la duración de la ventana. almacenamiento de sesión tiene por objeto permitir instancias separadas de la misma aplicación web que se ejecutan en diferentes ventanas sin que interfieran entre sí, un caso de uso que no está bien apoyado por las cookies.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el almacenamiento local.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML almacenamiento local de Objetos
HTML almacenamiento local ofrece dos objetos para el almacenamiento de datos en el cliente:
- window.localStorage - almacenes de datos sin fecha de vencimiento
- window.sessionStorage almacena los datos para una sola sesión (los datos se pierden cuando la pestaña del navegador se cierra) -
Antes de utilizar el almacenamiento local, comprobar el apoyo del navegador para localStorage y sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
El objeto localStorage
El objeto localStorage almacena los datos sin fecha de caducidad. No se eliminarán los datos cuando se cierra el navegador, y estarán disponibles al día siguiente, semana o año.
Ejemplo
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Inténtalo tú mismo " Ejemplo explicó:
- Crear un localStorage par nombre / valor con name="lastname" y value="Smith"
- Recuperar el valor de "lastname" y la inserta en el elemento con id = "número"
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 "lastname" elemento localStorage es el siguiente:
localStorage.removeItem("lastname");
Nota: Los pares nombre / valor siempre se almacenan como cadenas. Recuerde convertirlos a otro formato cuando sea necesario!
El siguiente ejemplo se 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 ser capaz de 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)."; Inténtalo tú mismo " El sessionStorage Objeto
El sessionStorage objeto es igual a la localStorage objeto, 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 se 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 = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session."; Inténtalo tú mismo "