Módulo 2. Herramientas Avanzadas de Javascript PDF

## Módulo 2. Herramientas avanzadas de Javascript ### Introducción En este módulo se estudian conceptos esenciales, como son los eventos. Trabajaremos atributos y eventos *on*, *addEventListener*, y las categorías donde estos se aplican: mouse, teclado, formularios y navegador web. Luego, tratare...

## Módulo 2. Herramientas avanzadas de Javascript ### Introducción En este módulo se estudian conceptos esenciales, como son los eventos. Trabajaremos atributos y eventos *on*, *addEventListener*, y las categorías donde estos se aplican: mouse, teclado, formularios y navegador web. Luego, trataremos el almacenamiento de datos local y cómo integrarlo con DOM para leer y almacenar datos, además de cómo gestionar datos dinámicos. Se introduce a promesas JavaScript (JS) y al comportamiento de las tecnologías de servidor. De esa forma, veremos cómo JS intercambia información a través de archivos en formato JSON o de servidores de backend reales. ### Video de inmersión ### Unidad 1: Eventos y almacenamiento de la información En esta unidad se aborda el manejo de eventos como un aspecto fundamental en la programación, ya que permite que la aplicación responda a las acciones de los usuarios, como hacer clic en botones o enviar formularios. Los eventos son los desencadenantes de la interactividad en una aplicación web. Además, se explora la capacidad de los navegadores web para almacenar datos localmente. Esto resulta útil para guardar preferencias y configuraciones, mejora la velocidad de respuesta y reduce la carga en el servidor backend, al minimizar las peticiones que este recibe. #### Tema 1: El manejo de eventos En JavaScript, los eventos permiten controlar las acciones realizadas por los usuarios en aplicaciones web. Podemos detectar diferentes eventos y definir acciones específicas en respuesta a ellos. Por ejemplo, cuando se hace clic en un botón o en un elemento de menú, se puede enviar un formulario o navegar a otra sección de la aplicación. Existen muchos eventos en JavaScript, pero la mayoría son aplicables a cualquier elemento HTML, lo que facilita su aplicación. Categorizar los eventos ayuda a organizarlos de manera efectiva y facilita recordarlos. #### Cómo manejar eventos en JS En el manejo de eventos en JavaScript se enlaza un objeto JS con un elemento HTML para asociar una función a un evento específico. Cuando el evento ocurre, se ejecuta la función asociada. Esto se conoce como manejo de eventos o *event handling*. Las funciones pueden ser convencionales o anónimas, creadas exclusivamente para cada evento. El navegador web tiene un escuchador que constantemente verifica si hay funciones asociadas al evento detectado. Si existe una función, se invoca como respuesta. Este proceso se conoce como *callback*. #### Formas de utilizar eventos Actualmente, JavaScript cuenta con diferentes formas de manejar eventos. Todas llevan al mismo resultado, pero se aplican de manera distinta. Veamos, en el siguiente gráfico, cuáles son estas formas. **Figura 1: Manejar eventos en JS** [Diagram of different ways to handle events in JS] #### Eventos: qué sí y qué no En el gráfico anterior se muestran los tres tipos de eventos que siguen vigentes en JavaScript. Se desalienta el uso del primero de ellos, atributos *ON*, desde 1999, cuando la organización W3C decidió separar el código de HTML, CSS y JavaScript en archivos diferentes. Tener el código correctamente separado ayuda a que el mantenimiento del software sea más efectivo, y a evitar la repetición innecesaria de bloques de código. El uso de eventos *ON* sigue vigente actualmente, pero en el ámbito laboral se alienta el uso de métodos que escuchen eventos (opción 3). Esta es la forma más moderna que llegó a JavaScript en 2015 y, como forma parte del estándar ES6, es la más requerida. Los avances en esta lectura se enfocarán en esta última opción: *addEventListener*. #### Tipos de eventos Categorizar los diferentes eventos ayuda a ordenar la forma en la cual recordaremos su uso. A continuación, se muestra una manera óptima de ordenarlos. **Figura 2: Categoría de eventos en JavaScript** [Diagram of event categories in JS] #### Eventos del mouse Estos eventos están asociados a todo aquel evento disparado por el puntero del mouse, e incluso por el *tap* que realizamos sobre elementos HTML, a través de pantallas táctiles. Estos se subdividen en los siguientes tipos. **Tabla 1: Referencia de los eventos del mouse** | Evento del mouse | Descripción | | - | - | | Click | Cuando el usuario realiza un clic con el mouse en un elemento. | | Dblclick | Cuando el usuario realiza doble clic con el mouse en un elemento. | | Mousedown | Cuando el usuario pulsa el botón sobre un elemento y lo mantiene pulsado (el inicio del evento clic). | | Mouseup | Cuando el usuario suelta el botón que pulsó sobre un elemento (el fin de un evento clic). | | Mouseover | Cuando el usuario posiciona el mouse sobre un elemento HTML. | | Mouseout | Cuando el usuario quita el mouse de arriba de un elemento HTML. | | Mousemove | Cuando el usuario mueve el mouse sobre un elemento HTML. | Fuente: elaboración propia. A continuación, se elaboran algunos ejemplos de estos eventos. #### Evento clic Disponemos de un proyecto donde tenemos un *div* con una clase CSS denominada *carrito-image*. Este contiene una imagen representativa de un carrito de compras de una aplicación de *e-commerce*. **Figura 3: Evento clic** [Illustrative image of the div tag] Fuente: elaboración propia. Desde JavaScript debemos enlazarnos al tag *div*, y definir una función que nos lleve al documento HTML correspondiente al carrito. **Figura 4: Evento clic. Enlace a <div>** ```javascript const divCarrito = document.querySelector('div.carrito-image') ``` Fuente: elaboración propia. Disponemos de una función JS genérica que nos permite definir la navegación web por todos los documentos HTML de nuestra aplicación web. Esta función recibe como parámetro el nombre del documento o ruta HTML a la cual debemos navegar, y ejecuta este proceso mediante el objeto *navigator*, nativo de JavaScript. **Figura 5: Evento clic. Objeto navigator** ```javascript const navegarHacia DocumentoHTML = (document)=> navigator.href = document; ``` ==End of OCR for page 1== Fuente: elaboración propia. Con todo este proceso correctamente definido, solo nos queda aplicar el evento clic en el *div* correspondiente, todo esto se maneja siempre desde JavaScript. Para ello, se utiliza el método *addEventListener*. Como se mencioné anteriormente, el método espera un primer parámetro denominado "evento", y un segundo parámetro denominado "callback". #### Funciones callback El *callback* está definido por una función anónima, o *arrow function*, que puede llamar a otra función general de la aplicación, o contener un bloque de código específico correspondiente a la tarea a ejecutar. **Figura 6: Evento clic. Función callback** ```javascript divCarrito.addEventListener("click", ()=> { navegarHaciaDocumentoHTML('carrito.html'); }); ``` Fuente: elaboración propia. En este caso, llamamos a la función de navegación JS predeterminada. Esta es genérica y reutilizable en cualquier otra parte de la aplicación. Es la forma más apropiada y buscada en la actualidad para controlar los diferentes eventos que acontecen en un documento HTML, desde el código JS. #### Evento mousemove Veamos otro ejemplo más. En este caso, se aplica un evento sobre la acción de mover o posicionar el mouse sobre un elemento HTML. Realizaremos una pequeña modificación del puntero del mouse, al cambiar el cursor sobre el hipervínculo por el dedo señalador. Este evento lo maneja HTML, pero como este no posee un hipervínculo aquí, debemos controlarlo con JavaScript. Veamos cómo realizarlo. **Figura 7: Evento clic. Evento mousemove** ```javascript divCarrito.addEventListener("mousemove", () => { divCarrito.style.cursor = 'pointer'; }); ``` Fuente: elaboración propia. Al agregar el evento *mousemove* sobre el elemento *divCarrito*, definimos, en la función *callback* asociada a este evento, que se utilice la propiedad *style* de JS. En esta se encontrará la propiedad denominada *cursor*, que dispone de diferentes opciones para cambiar el puntero del mouse. *Pointer* es el nombre del puntero que hace referencia a la mano que señala en los hipervínculos. De esta forma, activaremos el evento *mousemove* cuando el usuario posicione el cursor del mouse sobre *divCarrito*. El cursor cambiará, para notificar visualmente que ese elemento HTML posee un hipervínculo. #### Eventos del teclado Los eventos de teclado están regidos por todo aquello que refiere a la pulsación de teclas y al cambio de estados de determinados elementos. Para poder aplicar o controlar este tipo de eventos, debemos pensar en elementos HTML que nos permitan el ingreso de información mediante *INPUT*; se utiliza, por supuesto, un teclado o el portapapeles del sistema. **Tabla 2: Referencia de los eventos del teclado** | Evento de teclado | Descripción | | - | - | | Keypress | Cuando el usuario pulsa las teclas del teclado, usualmente mientras escribe en un campo de texto. | | Keydown | Cuando el usuario pulsa una tecla y la mantiene pulsada, para escribir en un campo de texto (el proceso inicial del evento *keypress*). | | Keyup | Cuando el usuario suelta la tecla pulsada en el proceso de escritura en un campo de texto (el proceso final del evento *keypress*). | | Change | Detecta algún cambio acontecido sobre algún elemento HTML. No precisamente sobre un elemento del tipo input (por ejemplo, cambiar la imagen mostrada en un tag *img* disparará el proceso change).| | Search (*) | Este evento está reservado al elemento HTML *<input type="search">* . Un *input type* que permite la escritura de texto, pero 100% enfocado en poder realizar búsquedas de contenido. Cuando el usuario escribe en este campo y pulsa la tecla *enter*, se dispara el evento "search". | Fuente: elaboración propia. Los elementos HTML del tipo *input* serán los protagonistas de este proceso de manejo. #### Evento keypress Para capturar el evento *keypress*, podemos imaginar que disponemos de un formulario web donde el usuario se ocupa de cargar contenido, por ejemplo: dar de alta nuevos productos. Este formulario está conformado por varios campos del tipo *input*, que definen los datos que debemos cargar. Veamos un ejemplo del formulario web, a través del siguiente gráfico, para contextualizar. **Figura 8: Ejemplo de formulario web** [Illustrative image of a web form] Fuente: elaboración propia. Todos los *input types* están enlazados desde JS mediante el método *querySelector*. También disponemos de un objeto literal denominado *nuevoProducto*. **Figura 9: QuerySelector** ```javascript ... const btnGuardar = document.querySelector('button#btnGuardar') const inputCodigo = document.querySelector("input#inputCodigo") const inputNombre = document.querySelector("input#inputNombre") const inputImporte = document.querySelector("input#inputImporte") const inputStock = document.querySelector("input#inputStock") const nuevoProducto = { id: 0, nombre: "", importe: 0.00, stock: 0 } ``` Fuente: elaboración propia. Si, por ejemplo, deseamos capturar el evento *keypress* de *inputNombre*, entonces debemos referenciar el método *addEventListener* sobre este elemento. Esto se hace como se muestra a continuación. **Figura 10: Evento keypress** ```javascript ... inputNombre.addEventListener("keypress", ()=> { console.log(inputNombre.value) }) ``` Fuente: elaboración propia. De esta forma, cada vez que se tipee en el campo de formulario en cuestión, podremos ver en la consola JS lo que se escribe. **Figura 11: Resultado del funcionamiento del evento keypress** [Illustrative image of the console] Fuente: elaboración propia. Cada vez que se tipea en el campo de formulario, *console.log* refleja en la consola JS el texto almacenado en este, y detecta el evento *keypress* en cuestión. #### Evento change De acuerdo con el ejemplo anterior, nuestro objetivo principal es capturar el evento *change* de cada *input type* (con excepción de *inputCodigo*); y guardar el contenido escrito en el formulario web, en cada propiedad homónima que conforma el objeto literal *nuevoProducto*. Este evento será disparado en el momento en el que el usuario deje de escribir contenido en el *input type* y este pierda el foco. Allí se inicia el evento *change*, que valida si hubo cambios en el estado del *input type* en cuestión. De haber cambios, dispara el evento en sí y, por lo tanto, su *callback* definido como acción. **Figura 12: Evento change** ```javascript inputNombre.addEventListener("change", ()=> { }) nuevoProducto.nombre = inputNombre.value inputImporte.addEventListener("change", ()=> { }) nuevoProducto.importe = inputImporte.value inputStock.addEventListener("change", ()=> { }) nuevoProducto.stock = inputStock.value ``` Fuente: elaboración propia. De esta manera, y sin esperar que el usuario pulse el botón *guardar*, conformamos la estructura del objeto literal *nuevoProducto*, para que esté listo para ser guardado en una aplicación backend, o que se sume como nuevo objeto en un array dedicado. **Figura 13: Validación de funcionamiento del evento change** [Illustrative image of valid data displayed in the console] Fuente: elaboración propia. #### Eventos de formulario Los formularios web existen desde mucho antes de la llegada de JS a los navegadores web. Recopilan información a través de campos de texto, y la envían a través de solicitudes HTTP. Todo su comportamiento y funcionalidad está supeditada por el intérprete de HTML del motor de los navegadores web, por lo que prescinde por completo del lenguaje JavaScript. Más allá de esto, JavaScript posee mecanismos para controlar el comportamiento de un formulario web, para ello utiliza eventos dedicados. Entre los eventos específicos de formularios, encontramos los siguientes. **Tabla 3: Referencia de los eventos del teclado** | Evento de formulario | Descripción | | - | - | | Focus | Cuando el usuario envía el foco a un elemento del formulario, por ejemplo: posiciona el cursor del mouse en un *input type* al hacer clic, o mediante la tecla de tabulación, | | Blur | Opuesto a *focus*. Cuando el elemento del formulario pierde el foco. | | Submit | Cuando se envía un formulario. Es disparado inicialmente por el elemento *input type submit* o *button type submit*. | Fuente: elaboración propia. Los eventos *focus* y *blur* son comúnmente utilizados para cuestiones muy puntuales o personales. Sin embargo, su comportamiento puede ser totalmente definido desde CSS, a través de las seudoclases apropiadas, por lo cual dejaremos esta tarea del lado de CSS. En cuanto al evento *submit*, este sí suele ser mayormente controlado desde JS, dado que la interacción actual de formularios generalmente trabaja con servicios web de backend. Estos difieren ligeramente del funcionamiento de aplicaciones de servidor convencionales, pensadas para controlar formularios web. #### El evento submit Este evento se produce cuando pulsamos el botón *submit* de un formulario web. Lo podemos detectar desde JS y frenar su comportamiento predeterminado, al tomar el control del formulario HTML y manejar su lógica desde JS. Para lograr esto, dependemos de un objeto global denominado *event*, que forma parte del Core JS. Este objeto global está siempre presente y se puede evocar de manera instanciada dentro de la función *callback*, que se define en los eventos que escuchamos. **Figura 14: Evento submit** ```javascript ... const formulario = document.querySelector("form") formulario.addEventListener("submit", (e)=> { console.log(e) }) ``` Fuente: elaboración propia *Button type submit* dispara el evento, sin embargo, este evento es controlado en sí por el tag form. Por lo tanto, debemos enlazarnos desde JS a dicho tag HTML <form>, para poder escuchar el evento en cuestión. Luego de enlazarnos, definimos el objeto global Event en la función de *callback* del evento submit. Usualmente se lo representa bajo los siguientes sinónimos: e, evt, ev, event. Elegimos el primero para representarlo. Al probar el evento *submit*, veremos que en la consola JS se muestra la información del objeto global Event. **Figura 15: Al pulsar el botón Guardar, generamos el evento submit** [Illustrative image displaying the Event object in the console] Fuente: elaboración propia. #### Prevenir el comportamiento por defecto Al disponer del objeto global *Event*, podemos hacer uso de un método interno denominado *preventDefault()*. Al referenciar este método, obligamos desde JS que el navegador web no ejecute de forma predeterminada el comportamiento del formulario web. Así podemos tener control del envío de los datos de este formulario, y manejar la lógica desde JS. A continuación, veamos un ejemplo de código. **Figura 16: PreventDefault()** ```javascript formulario.addEventListener("submit", (e)=> { e.preventDefault() inputCodigo.value = obtenerCodigo() nuevo Producto.id = nuevoProducto.value console.table (nuevoProducto) }) ``` ==End of OCR for page 2== Fuente: elaboración propia. Mediante *e.preventDefault()*, controlamos el comportamiento predeterminado del formulario. Invocamos a una función con retorno, que genera el ID automático para cada nuevo producto, y asienta el número correspondiente en *input type codigo*. Por último, asentamos el código numérico generado para nuestro producto, en la propiedad *id* del objeto *nuevoProducto*, y enviamos el objeto literal a la Consola JS. **Figura 17: Cómo se visualiza en la Consola JS un producto cargado en el formulario web** [Illustrative image of the console displaying the product data] Fuente: elaboración propia. Con el objeto global Event, al controlar el comportamiento por defecto del evento *submit* de un formulario web, también tenemos el control para evitar que al ocurrir este evento, el formulario web se resetee de forma predeterminada. En el gráfico anterior podemos ver cómo el producto cargado en el formulario web es visualizado en la Consola JS, con la información almacenada en el objeto *nuevoProducto*. #### Información adicional de un evento A continuación, podemos ver otro escenario donde el objeto global *Event* es capaz de brindar información adicional sobre diferentes eventos en cuestión. Para ello, volveremos por un momento al uso de los eventos de teclado. **Figura 18: Objeto Event** ```javascript inputNombre.addEventListener("keypress", (e)=> { console.log(e) }) ``` Fuente: elaboración propia. Si definimos, sobre cualquier campo de formulario, el evento *keypress*, y adjuntamos el objeto global *Event* como parámetro en la función *callback*, podemos ver que el mismo tiene la capacidad de, por ejemplo, identificar cuál elemento HTML genera el evento en cuestión. Esto se denomina información del evento. **Figura 19: Ejemplo de código** [Illustrative image of the console displaying the event data] Fuente: elaboración propia. La propiedad *key* del objeto global *Event* devuelve el nombre de la tecla pulsada. Esto nos ayudará a identificar qué tecla se pulsa y asociar un evento específico a la misma. (Ejemplo: el usuario pulsó *enter*, entonces envía el foco al siguiente campo de formulario). #### Propiedades adicionales que podemos leer Si queremos detectar una combinación de teclas como evento, podemos identificar las siguientes teclas extendidas. **Tabla 4: Controlar teclas extendidas con el objeto global Event** | Propiedad | Descripción | | - | - | | CtrlKey | Al retornar su valor *true*, indica que la tecla CTRL estaba pulsada. | | AltKey | Al retornar su valor *true*, indica que la tecla ALT estaba pulsada. | | ShiftKey | Al retornar su valor *true*, indica que la tecla SHIFT estaba pulsada. | | metaKey | Al retornar su valor *true*, indica que la tecla *win* (en Windows) o la tecla *command* (en Mac OS) estaba pulsada. | Fuente: elaboración propia. Esta es la fórmula que utiliza, por ejemplo, el cliente web GMail para poder definir la combinación de teclas para crear un nuevo mail, enviar un mail ya escrito, etcėtera. También tenemos disponible el acceso a los atributos del elemento HTML que generó el evento, a través de *e.target*. Por ejemplo, podemos identificar el ID de un elemento HTML y asignarle un evento dedicado que se dispare ante determinada acción del usuario. **Figura 21: E.target** ```javascript ... button.addEventListener("keypress", (e)=> { if (e.target.id === 'imgCarrito') { navigator.href = 'carrito.html'; } }) ``` Fuente: elaboración propia. #### Eventos de navegador El objeto global JS *window* brinda información sobre diferentes eventos que ocurren en el navegador web, y que están por fuera del manejo predeterminado que pueda tener JS. A continuación, se enumeran los eventos de navegador principales que podemos controlar. **Tabla 5: Controlar teclas extendidas con el objeto global Event** | Propiedad | Descripción | | - | - | | Scroll | Detectar cuando el usuario hace scroll sobre un documento HTML. | | Resize | Detectar que se redimensiona la ventana de navegación. | | Hashchange | Detectar si cambió la URL, definida por el carácter # (utilizado en SPA). | | Load | Detectar cuando se carga un documento HTML. | | Unload | Detectar cuando se descarga o se cierra un documento HTML. | | DOMContentLoaded | Detectar cuando se cargó un documento por completo (tags HTML, archivos de recursos externos como CSS, JS, imágenes, etc.). | | Online | Detectar cuando retorna la conectividad a internet. | | Offline | Detectar cuando se pierde la conectividad a internet. | Fuente: elaboración propia. Como podemos ver, los eventos son totalmente controlables por JavaScript, y el mecanismo del método *addEventListener* es el que nos ayudará a definir qué evento ejecutar y sobre qué elemento HTML definirlo. Existen otros eventos JS controlables, que están asociados a elementos específicos, tales como elementos HTML *<audio>* y *<video>*. En ellos podemos tener un dominio total de los controles de reproducción multimedia. #### Actividad 1 Descargar el siguiente archivo de proyecto comprimido en formato .ZIP, descomprimirlo y abrir la carpeta de proyecto con VS Code. [Link to ZIP file] ``` ZIP ``` Editar el archivo JavaScript. En el mismo, se encuentran referenciados los principales elementos del formulario HTML. Definir en este formulario el evento *change*, explicado a lo largo de esta lectura, para cada uno de los *input types* del formulario (excepto *input type codigo*). Agregar la función *callback* a cada evento *change*, para que se complete la propiedad correspondiente al *input type*, en el objeto *nuevoProducto*, tal como se explica en la lectura. Luego de finalizar estos pasos, ejecutar el documento HTML en el navegador web Chrome. Utilizar siempre live server. Abrir Developer tools e ir a la pestaña Consola JS. Probar la carga de contenido en cada campo de formulario, pasando entre uno y otro mediante la tecla TAB del teclado. Una vez completados los campos en cuestión, verificar en la consola JS si el objeto *nuevoProducto* posee todas las propiedades con datos válidos recuperados del formulario web. Para esto, ejecutar *console.table(nuevoProducto)*, que permite ver cómodamente la información del objeto literal. Por último, agregar el enlace JS al elemento <form>, con *querySelector*, y capturar luego el evento *submit* de este; prevenir su comportamiento por defecto y ejecutar la cláusula *console.table()* mencionada anteriormente, a través de dicho evento. Para conocer la resolución del caso, descargá el archivo al final de la lectura. ## Tema 2: Datos: transporte y almacenamiento *WebStorage* es una tecnología disponible en todos los navegadores web. Permite a las aplicaciones web almacenar datos en el navegador de los usuarios. Estos datos pueden ser temporales o persistentes, lo que significa que permanecen disponibles incluso después de cerrar y volver a visitar la página web. Esto brinda a los desarrolladores una forma conveniente de guardar y recuperar información en la máquina del usuario, al mismo tiempo que mejora la experiencia del usuario y reduce las interacciones con el servidor backend. #### Almacenamiento de datos en el cliente web Desde la llegada de HTML5 en su versión final en 2014, el almacenamiento web del lado del cliente (en su web browser), dejó de estar regido por las cookies para pasar a disponer de varias opciones. Entre estas opciones encontram: *LocalStorage*, *SessionStorage*, e *IndexedDB*, entre otras no tan funcionales como WebSQL. **Figura 22: Formas de almacenamiento local en un navegador web** [Illustrative image of local storage methods] Fuente: elaboración propia. Toda la información de almacenamiento de datos en un navegador web se encuentra en el apartado aplicación (application, en inglés), en DevTools. Allí podremos ver todas las opciones mencionadas, e incluso acceder a una parte de los datos que estén almacenados. Cada información que se guarda allí se relaciona directamente con el sitio o aplicación web que generó estos datos. La misma no es *cross-site*, por lo tanto, no podremos compartir información entre diferentes sitios o aplicaciones web. #### Tipos de almacenamiento local En la siguiente tabla vemos los diferentes tipos de *webstorage* y sus características. **Tabla 6: Descripción de los tipos de almacenamiento local (webstorage)** | Webstorage | Descripción | | - | - | | LocalStorage | Posee la capacidad de almacenar entre 5 y 10 MB de información por dominio, según el navegador web o el tipo de dispositivo. Funciona bajo una estructura de pares clave-valor, y es persistente hasta que la aplicación web o el usuario eliminen los datos allí almacenados. | | SessionStorage | Posee las mismas características de almacenamiento y estructura que *LocalStorage*. Se diferencia de este porque la información es almacenada por sesión (de forma temporal). Cuando la sesión finaliza (el usuario cierra la pestaña), lo almacenado se pierde.| | IndexedDB | Su capacidad de almacenamiento es significativa. Se estima que puede ocupar hasta el 80% del espacio del dispositivo. *IndexedDB* posee un formato del tipo base de datos NoSQL, para aprovecharla al máximo requiere un manejo muy avanzado de JS. | | WebSQL | Inicialmente, fue un excelente mecanismo de almacenamiento local basado en el lenguaje SQL (database, tablas, campos, registros). Desde 2010 dejó de evolucionar. Muchos navegadores web actualmente desactivan *WebSQL* y, en algunos años, se retirará definitivamente su soporte completo. | | Cookies | Las cookies existen desde que nacieron los navegadores web. Poseen muy baja capacidad de almacenamiento, 4 KB. Desde hace unos años se desalienta su uso. Es probable que en los próximos años desaparezcan como opción en los navegadores web, al igual que *WebSQL*. | Fuente: elaboración propia. #### LocalStorage y SessionStorage El mecanismo de uso de ambos es similar. Están integrados como un objeto global del Core de JavaScript, dentro del objeto *window*, y pueden aprovecharse al máximo en desarrollos web frontend. Poseen cuatro métodos simples para manipular la información a grabar, leer o eliminar de *webstorage*. Veamos a continuación cuáles son. #### SetItem() El método *setItem()* recibe dos parámetros: *clave* y *valor*. La clave corresponde al identificador amigable con el cual queremos definir la información a almacenar. Por ejemplo, si deseamos almacenar el nombre del usuario que accede a nuestra plataforma, para darle la bienvenida a través de un mensaje en pantalla, podemos crear una clave y almacenar su nombre como valor. **Figura 23: setItem()** [Illustrative image of LocalStorage.setItem()] Fuente: elaboración propia. Luego, cada vez que el usuario acceda a la aplicación web, leemos este valor desde LocalStorage y armamos un mensaje personalizado de saludo, que se muestra en algún lugar del documento HTML. #### GetItem() Este método permite recuperar un valor o clave almacenado previamente en *WebStorage*. En este caso, el método recibe solo un parámetro, que corresponde al nombre de la clave a recuperar. **Figura 24: GetItem()** ```javascript const userName = localStorage.getItem('nombre') ``` Fuente: elaboración propia. Este método funciona con retorno implícito, por lo tanto, debemos declarar una variable o constante para poder recuperar el valor almacenado; si es que existe. En el caso de que no exista, el valor de la variable o constante será null. **Figura 25: Definir valor alternativo** ```javascript const userName = localStorage.getItem('nombre') || 'identificate' ``` ==End of OCR for page 3== Fuente: elaboración propia. Ante esta última situación, podemos utilizar el operador lógico OR para definir un valor alternativo y que la variable o constante no obtenga un valor inconsistente para la lógica de nuestra aplicación. #### Removeltem() Finalmente, ante la necesidad de remover o eliminar una clave - valor que ya no necesitemos, podemos recurrir a este otro metodo. Se informa como parámetro el nombre de la clave a eliminar. **Figura 26: Removeltem()** [Illustrative image of LocalStorage.removeItem()] Fuente: elaboración propia. #### Clear() Por último, si hacemos un uso intensivo de *webstorage* y por alguna situación específica necesitamos eliminar todo rastro de este, disponemos del método *clear()*, que se ocupa de eliminar toda *clave-valor* existente. En el caso de utilizar este último método, debemos tener precaución, ya que borrarà todo sin previa confirmación del procedimiento. Todos estos métodos son communes a LocalStorage y SessionStorage, con la salvedad de las diferentes formas en las que se comporta cada uno de ellos. #### El objeto global JSON El uso de *LocalStorage* o *SessionStorage* para almacenar información nos limita a guardar tipos de datos en formato string. Para datos simples, como el almacenamiento de un nombre (que pusimos como ejemplo), no habrà ningún problema. Habrà inconvenientes si tenemos la necesidad de almacenar datos en un formato de objeto. **Figura 27: Ejemplo de código. Creación de clave denominada nombre** ```javascript localStorage.setItem('nombre', 'Teclab') const producto = {id: 123, nombre: 'Computadora', importe: 125_000} localStorage.setItem('producto', producto) ``` Fuente: elaboración propia. A través de este último ejemplo de código, vemos la creación de una clave denominada *nombre*, con un valor del tipo string asociado. Luego, creamos un objeto literal llamado *producto*, con algunos datos simples. Al intentar almacenarlo en LocalStorage, veremos que la clave se crea sin problema, pero que su valor almacenado no es la estructura de objeto literal en sí. **Figura 28: Dificultades en valor almacenado** [Illustrative image of the console displaying JSON data] Fuente: elaboración propia. Aquí comprobamos que *localStorage* solo acepta valores del tipo string. Si intentamos recuperar el valor almacenado en la clave "producto", veremos un texto similar al del ejemplo gráfico; por lo tanto, serà inservible para nuestra labor. Para resolver este inconveniente, existe el objeto global JSON, integrado al Core del lenguaje JavaScript. #### JSON Este objeto nos permite tomar estructuras del tipo objeto literal, array de objetos literales, y arrays de elementos, y convertirlas a un formato que pueda ser almacenado, por ejemplo, en *webstorage*. Para lograr esto, este objeto tiene dos métodos. #### JSON.stringify() Este método recibe por parámetro una estructura de objeto JS. Dicha estructura puede ser un objeto literal, array de objetos o array de elementos. El método *stringify* la analiza y se ocupa de convertir toda la estructura en