Capitulo 6 ➜ ¿Cómo usar el localStorage?

Para esta última lección agregue unos cambios finales a nuestros estilos, tal como ven ahora el sitio, con nuevos cursos, y una fuente diferente, ya está en su forma definitiva, así es como encontrarán los archivos para descarga; bueno ahora revisemos cómo funciona el sitio hasta ahora, si tu escoges un curso, este va al carrito, puede ser más de uno, porque se acomodan en el carrito en forma de filas, a nuestros cursos ya seleccionados le puedes seguir agregando más cursos, los que gustes, pero hay un problema y es que cada que recargues el sitio estos cursos se pierden, ya no aparecen en el carrito, ¿como hacemos que perduren los cursos en el carrito? 

Métodos getItem y setItem del local Storage.

Lo que queremos hacer es guardar nuestros cursos en un lugar donde podamos recuperarlos, empecemos con una función a la que llamaré “guardarLS” (por localStorage) la cual empezará con una variable, cuyo valor dependerá de dos cosas, si nuestro local storage está vacío o si ya tiene contenido previo, si está vacío, pues cursos estará vacío, pero si no está vacío, entonces hay que recuperar lo que tiene. ¿y como vemos el local Storage? con la propiedad LocalStorage de Window (no es necesario poner el window), luego, con getItem recuperamos lo que tiene el localStorage en una clave que pasamos como argumento, para nuestro caso “cursos” es la clave que buscamos, en caso la clave no exista, y no, no existe aun, se devuelve “null”, para este caso curso solo será un array vacío porque no se ha encontrado la clave cursos, ¿y que pasa cuando era lo contrario? que cursos tenía que recuperar ese valor, entonces ponemos, cursos va ser igual, y aca algo muy importante, ¿recuerdas cuando usamos Array from, para hacer una conversión a array? pues de la misma forma usaremos Json.parse para setear en la forma de un objeto,  lo que se recibe como un string, y para que esta función siga vigente también debe recuperar el contenido que ya tenga el localStorage no solo asumir que está vacío. 

Ahora ya sea un array vacío o con el contenido del localStorage, vamos a usar push para guardar un nuevo valor en nuestro array, que de eso va esta función, de guardar en el localstorage ¿y que más vamos a guardar? pues el curso que hayamos elegido comprar, sobre el que hayamos clicado y puesto en el carrito, ese tiene que ir a localStorage, ese curso en cuestión estará como parámetro de la función. Aún no hemos guardado nada en local storage, hemos recuperado lo que ahí había, ¿y como se guarda en local Storage? como vimos con get recuperamos contenido, así que para escribir contenido se usa setItem, con este método podemos escribir una clave con su respectivo valor en el localstorage, para nuestro caso la clave es cursos, y para el valor necesitamos un string, por lo que usamos de nuevo Json, pero esta vez con el método stringify para convertir nuestro array cursos en un string, pero este es un string especial, les explico…

Serializar y deserializar | métodos parse y stringify de Json.

A lo que acabamos de hacer se le dice serializar y deserializar, cuando hacemos que cursos pase a ser un string con Json.stringify, no crea cualquier string, crea un string formato json, es decir está serializado y cuando le damos el valor de la clave cursos, el que está en localstorage, al Json.parse, lo que se está recibiendo es un string en formato json, entonces sucede lo opuesto a la serialización, la deserializacion, en la que un string formateado en json pasa a convertirse en un objeto común de javascript.

¿Cómo ver el localStorage en el navegador?

Ya podemos usar nuestra función, la usaremos dentro de la función flecha que agrega al carrito pasando como argumento  el objeto “infoCurso”, que sabemos, es el curso que fue seleccionado, con eso ya estamos listos para probar, para ver nuestro local storage en el navegador primero abrimos las herramientas de desarrolladores (debes poner antes un curso en el carrito), y vamos a las opciones que nos proporcionan estas flechitas (ver imagen a continuación) y elijan aplicación, en el menú de aplicación vallan a localstorage, y si revisamos encontrarán allí “cursos” con su respectivo valor,  

Preservar los cursos en el carrito.

¿Qué sigue? pues tendríamos que hacer que ese contenido ahora se coloque en el carrito, cada que se carga la página, veamos cómo, hay que sacar afuera nuestro if que hicimos en guardarLS, porque constantemente estaremos recuperando el contenido de localStorage, y es mejor que esté en su propia función llamada “obtenerLS”, otra razón de separar la lógica de guardarLS, es que esta función aligerara un poco a “leerLS”, esta última es una función nueva que tiene un foreach, (pueden verla en la imagen a continuación) lo primero a notar es que está usando el “obtenerLS”, y usa un foreach para recorrer lo que encuentre en la clave cursos del localStorage, si el código e te hace familiar, es porque estoy usando el innerhtml que hicimos para insertar al carrito. Ya por último en la parte donde agregamos los eventos, voy a agregar una linea mas en la que al objeto global document le estaré agregando el evento “DOM content loaded” que en pocas palabras actúa cuando se termina de cargar la página, llamando a la función “leerLS”, y con eso cada que compremos un curso, y recarguemos, estos seguiran ahi.