AdNow
loading...
Almacenamiento local HTML5
- Obtener vínculo
- X
- Correo electrónico
- Otras apps
Almacenamiento local HTML5
Almacenamiento local HTML; mejor que las cookies
What is HTML Almacenamiento Local?
Con el almacenamiento local, 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, incluidos en cada solicitud del servidor. El almacenamiento local 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 local es por origen (por dominio y protocolo). Todas las páginas, desde un origen, pueden almacenar y acceder a los mismos datos.
Soporte del navegador
Los números en la tabla especifican la primera versión del navegador que admite completamente el almacenamiento local.
API | |||||
---|---|---|---|---|---|
Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Almacenamiento Local Objects
El almacenamiento local en HTML proporciona dos objetos para almacenar datos en el cliente:
- window.localStorage - almacena datos sin fecha de caducidad
- window.sessionStorage - almacena los datos de una sesión (los datos se pierden cuando se cierra la pestaña del navegador)
Antes de usar el almacenamiento local, verifique el soporte 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. Los datos no se eliminarán cuando se cierre el navegador, y estarán disponibles al día siguiente, a la semana o al año.
Ejemplo
// StorelocalStorage.setItem("lastname", "Smith");
// Retrievedocument.getElementById("result").innerHTML = localStorage.getItem("lastname");
Pruebelo usted mismo »
Ejemplo explicado:
- Cree un par de nombre / valor localStorage con name = "lastname" y 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í:
lastname
La sintaxis para eliminar el elemento localStorage "lastname" es la siguiente:
removeItem
Nota: Los pares nombre / valor siempre se almacenan como cadenas. ¡Recuerde convertirlos a otro formato cuando sea necesario!
El siguiente ejemplo cuenta la cantidad 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).";
Pruebelo usted mismo »El objeto sessionStorage
El objeto sessionStorage 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.";
Pruebelo usted mismo »- Obtener vínculo
- X
- Correo electrónico
- Otras apps
Formulario de contacto
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...