Universidad Castro Carazo

Facultad de ingeniería

Materia
Programación VI

Trabajo de investigación

Tema
HTML5 Local Storage & Session Storage

Integrantes

Jenner Castro Díaz

Wesley Cascante Burford
Edwin Sojo Arroyo

II Cuatrimestre

Año
2023

pág. 1
Tabla de contenidos

Tabla de contenidos ......................................................................................... 2

¿Qué es HTML? ................................................................................................. 3
¿Qué es HTML5? ............................................................................................... 4
¿Para qué sirve HTML5? ................................................................................... 5
¿Cuáles son las novedades? ............................................................................. 5
Ventajas de usar el lenguaje HTML5 ................................................................. 6
¿Qué hace un desarrollador HTML5? ................................................................ 6
¿Cuáles son los dos tipos de almacenamiento web en HTML5? ....................... 7
¿Qué es Local Storage de HTML5? ................................................................... 7
¿Cómo se utiliza LocalStorage?......................................................................... 8
¿Qué es Session Storage de HTML5? ............................................................... 8
Conclusión.......................................................................................................... 9
Bibliografía ....................................................................................................... 10

pág. 2
¿Qué es HTML?

Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear

las páginas web a las que se accede mediante internet". Más concretamente,
HTML es el lenguaje con el que se "escriben" la mayoría de las páginas web.

Los diseñadores utilizan el lenguaje HTML para crear páginas web, los
programas que se emplean generan páginas escritas en HTML y los
navegadores que utilizamos (por ejemplo, Google Chrome, Opera o Mozilla
Firefox) muestran las páginas web después de leer e interpretar su contenido
HTML.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee,

investigador del CERN (Organización Europea para la Investigación Nuclear)
propuso un nuevo sistema de “hipertexto” para compartir documentos.

Los sistemas de hipertexto habían sido desarrollados años antes. En el ámbito

de la informática, el hipertexto permite que los usuarios accedan a la
información relacionada con los documentos electrónicos que visualizan. En
cierta manera, los primitivos sistemas de hipertexto podrían asimilarse a los
enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema, Tim Berners-Lee lo presentó a una

convocatoria organizada para desarrollar un sistema de hipertexto para
internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert
Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). El
primer documento formal con la descripción de HTML se publicó en 1991 bajo
el nombre “HTML Tags” (Etiquetas HTML) y todavía hoy puede ser consultado
en línea a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en

1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque
se consiguieron avances significativos (en esta época se definieron las
etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas
de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar
oficial.

En 1995, el organismo IETF organizó un grupo de trabajo de HTML y el 22 de

septiembre publicaron el estándar HTML 2.0. A pesar de su nombre, HTML 2.0
es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de

estandarización, el W3C. La versión HTML 3.2 se publicó el 14 de Enero de
1997 y es la primera recomendación de HTML publicada por el W3C. Esta
revisión incorpora los últimos avances de las páginas web desarrolladas hasta
1996, como applets de Java y texto que fluye alrededor de las imágenes.

pág. 3
HTML 4.0 se publicó el 24 de abril de 1998 (versión corregida de la publicación
del 18 de Diciembre de 1997) y supuso un gran salto desde las versiones
anteriores. Entre sus novedades más destacadas se encuentran las hojas de
estilos CSS, la posibilidad de incluir pequeños programas o scripts en las
páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas
complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999

y se denomina HTML 4.01. Se trata de una revisión y actualización de la
versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML

se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este
motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su
preocupación por la falta de interés del W3C en HTML y decidieron organizarse
en una nueva asociación llamada WHATWG (Web Hypertext Application
Technology Working Group). La actividad actual del WHATWG se centra en el
estándar HTML5, cuyo primer borrador oficial se publicó el 22 de enero de
2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la
publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió
retomar la actividad estandarizadora de HTML.

HTML5 ya es un estándar (recomendado), el consorcio W3C, con el inventor de

la Web Sir Tim Berners-Lee, presentó el 27 de octubre de 2014 la versión final.
Su intención es que se construya lo que se ha llamado Plataforma Web abierta,
donde el HTML5, junto a Javascript y CSS3, se podrá utilizar para el desarrollo
de aplicaciones multiplataforma (Linux, Windows, Android, iOS..).

¿Qué es HTML5?

HTML5 es la última versión de HyperText Markup Language (Lenguaje de

Marcado de Hipertexto). Combina tres tecnologías web: HTML, para construir
la estructura de la página; CSS, para mejorar la presentación; y JavaScript,
para agregar funcionalidad a los elementos HTML. Sus etiquetas o marcas
hacen que textos, imágenes y elementos multimedia se visualicen
correctamente en la pantalla, y que las páginas web tengan un formato
unificado, estandarizado y sean compatibles con distintos navegadores, como
Chrome, Edge, Firefox y Safari.

pág. 4
¿Para qué sirve HTML5?

Las funciones del lenguaje HTML5 no se limitan a definir la configuración

básica de una página web. Veamos las funciones más destacadas de esta
versión:

Incorpora elementos multimedia sin utilizar otros plugins, como Adobe Flash.
Esto ayuda a reducir el tamaño de un documento y el tiempo de carga.

Agrega opciones de geolocalización para mejorar la experiencia de usuario

ofreciendo cambiar el idioma o redireccionar a una página específica
dependiendo de la región.

Permite crear animaciones en 2D e incluir acciones específicas para el teclado,

el mouse o el mando de videojuegos para interactuar con una página.

Desarrolla aplicaciones web con el diseño adaptativo que son accesibles desde
cualquier tipo de dispositivos: tablets, smartphones, computadoras de escritorio
y hasta televisores Smart TV.

¿Cuáles son las novedades?

En comparación con las versiones anteriores, HTML5 introduce muchas

mejoras para solucionar problemas complejos. Las nuevas funciones incluyen:

Etiquetas semánticas ( <header>, <nav>, <section>, <article>, <footer>, etc.),

Etiquetas de multimedia (<audio> y <video>),

Nuevas formas de control, como atributos, tipos de entrada, barra de progreso,

etc.

La etiqueta <canvas> para dibujos en 2D usando JavaScript,

La etiqueta <svg> para dibujos basados en vectores, formas, gráficos circulares

y de barras, mapas, etc.

La geolocalización para detectar la ubicación del usuario.

El almacenamiento web de hasta 5 MB de datos en el Front End.

Nuevos eventos en JavaScript, como arrastrar y soltar, etc.

pág. 5
Ventajas de usar el lenguaje HTML5

Es gratuito: no necesitas ningún software costoso para empezar a programar.

El lenguaje tiene un código claro, ordenado y fácil de aprender.

HTML5 es compatible con los navegadores web más populares y tiene un

diseño responsivo.

Las etiquetas descriptivas brindan un mejor posicionamiento en buscadores

como Google.

HTML5 soporta multimedia y funcionalidades interactivas.

Las APIs permiten incluir elementos complejos, como dibujos 3D o mapas,

directamente en el documento.

Se puede realizar consultas SQL.

HTML5 permite crear aplicaciones web.

El lenguaje optimiza el tiempo de carga de un sitio web.

La información del sitio web está mejor protegida.

¿Qué hace un desarrollador HTML5?

El conocimiento de HTML5 es una habilidad muy extendida entre los

diseñadores web. Un programador profesional domina las reglas de este
lenguaje para construir sitios web responsivos y actualizados. Los
desarrolladores HTML5 utilizan programas especializados; según un estudio
(en inglés) de Stack Overflow Developer Survey 2021, entre los editores de
HTML más populares están Visual Studio Code, Notepad++, Sublime Text y
Atom. El trabajo con HTML5 permite crear sitios web altamente eficientes tanto
para los algoritmos de buscadores, gracias a las etiquetas, como para los
usuarios, mediante el diseño visual de páginas web desarrollado con el
lenguaje CSS.

Aprende a crear páginas web y lanza tu carrera en el sector IT con nuestro

curso online de Desarrollo Front End de cero a pro. Nuestros profesores
expertos te enseñarán a programar en HTML, crear diseños con CSS, animar
páginas web con JavaScript y mucho más. Harás actividades prácticas durante
el curso, a tu ritmo y desde cualquier lugar, con el feedback personalizado del
tutor. Al finalizar el curso realizarás cuatro proyectos profesionales que

pág. 6
enriquecerán tu portafolio, recibirás el certificado de EBAC y tendrás acceso a
la plataforma de por vida.

¿Cuáles son los dos tipos de almacenamiento web en HTML5?

Este API de almacenamiento ofrece dos posibilidades para guardar datos en el

navegador: sessionStorage y localStorage.

La diferencia entre localStorage y sessionStorage es que la información

almacenada con localStorage se guarda indefinidamente hasta que sea
eliminada mediante código o bien borrada desde el navegador y con
sessionStorage la información se guarda hasta que se cierra el navegador.

¿Qué es Local Storage de HTML5?

LocalStorage es una herramienta compatible con html5 y los navegadores que

lo soportan, incluso explorer desde su versión 8 hacia arriba.

La gracia de ésta es la capacidad para almacenar datos de manera local en el

navegador que utiliza el usuario mientras navega. Esta información quedará
almacenada para siempre en cada sesión nueva que inicia el usuario en su
navegador, a menos claro, que nosotros queramos eliminarla por alguna razón.

LocalStorage trabaja de manera similar que las cookies, sin embargo, cuenta
con un espacio de 5mb y al trabajar de manera local, no necesita hacer
peticiones de servidor.

Es un tipo de almacenamiento muy utilizado y el acceso a la información es

bastante rápido. Las características más importantes de este espacio de
almacenamiento son:

• Está basado en el formato clave-valor.

• No tiene fecha de expiración, a menos que se limpie el navegador de
forma explícita usando los ajustes del propio navegador o por código en
JavaScript.
• Puede almacenar hasta 10MB de datos, dependiendo del navegador.
• Sólo los scripts del mismo origen pueden acceder a los datos.
• Se puede compartir entre diferentes pestañas.
• No se envían los datos al servidor, es de uso exclusivo del cliente.
• Los datos que se almacenan son de tipo texto.

pág. 7
¿Cómo se utiliza LocalStorage?

LocalStorage es una herramienta que se utiliza vía JavaScript, donde

podremos manipular nuestros datos almacenados de la forma que estimemos
más conveniente. Para comenzar a utilizar localStorage, debemos tener los
siguientes métodos en cuenta:

localStorage.setItem(“key”, item);

Este es el método para almacenar información en nuestro localStorage. En el

primer parámetro “key” ingresamos el nombre de nuestro elemento, y en el
parámetro “item” ingresamos el valor de éste.

Ejemplo:

localStorage.setItem(“userID”, 10);

En este caso particular estoy guardando en mi localStorage un elemento

llamado “userID” con el valor de 10.

La forma más adecuada de trabajar con el Local Storage sería:

Para almacenar un elemento:

localStorage.setItem(“key”, “value”)

Para obtener un elemento:

localStorage.getItem(“key”)

Para eliminar un elemento:

localStorage.removeItem(“key”)

Para limpiar toda la información:

localStorage.clear()

¿Qué es Session Storage de HTML5?

Es un tipo de almacenamiento en el navegador muy parecido al Local Storage.

Comparten muchas de sus características principales pero la mayor diferencia
es que el Session Storage no se puede compartir entre diferentes pestañas. La
otra diferencia mayor es que la información perdura mientras este la pestaña
abierta, lo que dura la sesión del usuario. Las características más importantes
son:

pág. 8
 • Está también basado en el formato clave-valor.
• La información persiste hasta que la pestaña o ventana es cerrada,
incluso con una recarga de la página.
• Almacena entre 5 y 10MB de datos, dependiendo del navegador que se
utilice.
• Sólo los scripts del mismo origen pueden acceder a los datos.
• Está limitado al uso dentro de la misma pestaña, no se puede compartir
información entre ventanas o pestañas.
• Es de uso exclusivo del lado cliente.
• El formato de la información que se almacena es de tipo texto.

La forma más adecuada de trabajar con el Session Storage sería:

Para almacenar un elemento:

sessionStorage.setItem(“key”, “value”)

Para obtener un elemento:

sessionStorage.getItem(“key”)

Para eliminar un elemento:

sessionStorage.removeItem(“key”)

Para limpiar toda la información:

sessionStorage.clear()

Conclusión

El uso de localStorage y sessionStorage en HTML5 proporciona una forma

conveniente de almacenar datos en el cliente, ya sea de forma persistente o
temporalmente durante una sesión. Estas API son ampliamente utilizadas en el
desarrollo web para mejorar la experiencia del usuario y mantener datos
relevantes en el navegador.

pág. 9
Bibliografía

Fecha: 8 de julio, 2023.

https://www.tokioschool.com/noticias/historia-lengu

Fecha: 8 de julio, 2023.

http://desarrolloweb.dlsi.ua.es/cursos/2011/html5-css3-es/html5

Fecha: 8 de julio, 2023.

https://www.um.es/docencia/barzana/DAWEB/Introduccion-a-html-y-
css.html#:~:text=El%20origen%20de%20HTML%20se,hab%C3%ADan%20sid
o%20desarrollados%20a%C3%B1os%20antes.

Fecha: 8 de julio, 2023.

https://ebac.mx/blog/que-es-
html5#:~:text=HTML5%20es%20la%20%C3%BAltima%20versi%C3%B3n,funci
onalidad%20a%20los%20elementos%20HTML

Fecha: 8 de julio, 2023.

https://blog.ida.cl/desarrollo/guardar-y-eliminar-datos-via-
localstorage/#:~:text=%C2%BFQu%C3%A9%20es%20LocalStorage%3F,utiliza
%20el%20usuario%20mientras%20navega

Fecha: 8 de julio, 2023.

https://www.merkle.com/es/es/blog/almacenamientos-navegador-local-storage-
session-storage-indexeddb-cookie#:~:text=clear()-
,Session%20Storage,puede%20compartir%20entre%20diferentes%20pesta%C
3%B1as

pág. 10