LocalStorage

Hoy aprenderemos a como utilizar el LocalStorage de HTML y JavaScript para usarlo en nuestras paginas web.

¿Qué es el LocalStorage?

Con el LocalStorage podemos guardar información en nuestro navegador web a modo de sesión y que esa información persista y esté disponible durante la navegación entre las diferentes páginas de nuestro sitio web.

El LocalStorage suele usarse mucho en aplicaciones web desarrolladas completamente con JavaScript,  puede aplicarse a cualquier web en la cual necesitemos compartir datos entre secciones.

Veamos cómo usar el LocalStorage en JavaScript.

Guardar datos en el navegador

Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:

// Guardar
localStorage.setItem("elemento", "ListadeElementos");

De esta manera damos de alta un nuevo elemento.

Recuperar datos

Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:

// Conseguir elemento
localStorage.getItem("elemento");

Esto nos devolverá el valor que hemos guardado anteriormente.

Guardar objetos en el LocalStorage

Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.

Tendríamos que hacer algo así:

localStorage.setItem("usuario", JSON.stringify(mi_objeto));

Guardamos el elemento usuario cuyo valor es un objeto convertido a string.

Sacar objetos del LocalStorage

Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript JSON en lugar del string JSON que se encuentra guardado por defecto.

Haríamos esto:

JSON.parse(localStorage.getItem("usuario"));

Recordemos que:
JSON.parse() es para convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.

Borrar o vaciar el LocalStorage

Para eliminar un elemento del LocalStorage usaremos la siguiente instrucción:

localStorage.removeItem("usuario");

Siendo"usuario" el identificador del elemento.

Para vaciar por completo el LocalStorage usaremos la siguiente instrucción:
localStorage.clear();

See the Pen
localstorage
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

[Arreglos] en JS

Siempre será necesario el uso de arreglos en cualquier lenguaje de programación y claro que JavaScript no es la excepción.

En esta publicación aprenderemos como declarar arreglos, como agregar, ordenar y eliminar elementos dentro de los también conocidos como “Arrays”.

Primero

Los arreglos son una colección ordenada de elementos no homogéneos, cada elemento puede ser de un tipo de dato diferente.

Son el método más común y simple de almacenar datos. Técnicamente, un “Array” es un objeto intrínseco de JavaScript. Admite datos del tipo cadenas, números, objetos, arrays, true, false, null.

Declaración

Existen dos formas de declarar un arreglo y son las siguientes:

La primera forma de declarar un arreglo es a través de los corchetes.

Un ejemplo de arreglo con tres datos string seria:

 var arreglo1 = ["rojo", "azul", "verde"] ;

En el caso de un arreglo vacío sería:

 var arreglo1 = [];

La segunda forma nos permite declarar un arreglo estableciendo el número de posiciones e indicando los elementos que tendrá.

De la siguiente manera declaramos el arreglo, pero sin ninguna posición:

 var arreglo2 = new Array();

entonces para establecer un número de posiciones para el arreglo, seria:

 var arreglo2 = new Array(3);

Dentro de los paréntesis o mejor llamado constructor, se establece el número de elementos que puede contener este arreglo, a su vez, se podría indicar los elementos del arreglo:

 var arreglo2 = new Array("rojo", "azul", "verde");

Agregar Elementos

Para agregar elementos dentro de nuestro arreglo podemos usar las funciones Push y Unshift.

  • Push agrega un elemento al final del arreglo.
  • Unshift agrega un elemento al inicio del arreglo.

Ejemplos:
var Colores = ["rojo","verde"];


Colores.push["azul"];
["rojo","verde","azul"]

Colores.unshift["negro"];
["negro","rojo","verde","azul"]

Ordenar elementos

Para ordenar elementos tenemos la función Sort que ordena alfabéticamente elementos de tipo string y ordena de menor a mayor elementos de tipo entero.

También existe la función Reverse que invierte el orden del arreglo.

Colores.sort();
["azul","negro","rojo","verde"]

Colores.reverse();
["verde","rojo","negro","azul"]

Eliminar elementos 

Para eliminar elementos de nuestro arreglo tenemos las funciones Pop Shift.

  • Pop elimina el ultimo elemento del arreglo
  • Shift elimina el primer elemento del arreglo

Ejemplos:
var Colores = ["verde","rojo","negro","azul"]

Colores.pop();
["verde","rojo","negro"]

Colores.shift();
["rojo","negro","azul"]

See the Pen
Arreglos en js
by JHilarioOjeda (@jhilarioojeda)
on CodePen.

Efectos en imágenes con FadeIn y FadeOut

Siempre queremos darle la mejor presentación a nuestra página web usando y manejando imágenes de la mejor manera, muchas veces recurrimos a métodos que nos permiten crear efectos de alta calidad pero con el defecto que hacen lenta y no muy funcional nuestra página haciendo que la navegación dentro de la misma sea molesta para el usuario.

Por eso en esta publicación te mostraremos como desplegar algunas imágenes sin hacer uso de técnicas que estropeen la funcionalidad de tu página.

Documento HTML
Lo primero que debemos hacer es nuestro documento HTML, donde en una lista desordenada agregamos imágenes y dos enlaces con id “mostrar” y “ocultar”, conteniendo el mismo texto.

Documento CSS
Agregaremos un estilo, en un archivo CSS, para nuestros elementos en la lista de imágenes donde no se vea ninguna viñeta y se encuentren colocados a la izquierda. Es importante no mostrarlos en un inicio, esto lo podemos hacer agregando “display: none”.

Creación del Script
Para realizar el efecto sobre las imágenes haremos un script. Usaremos JQuery así que debemos agregar la siguiente librería en nuestro HTML: https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Utilizaremos la sentencia “document.ready “y dentro de ella cargaremos la función padre que contendrá las dos funciones dependientes que serán activadas mediante el evento “click” que se efectúa sobre los enlaces.

Finalmente pasamos a definir el contenido de cada una de las funciones internas, que serán las encargadas de llevar acabo el efecto de mostrar nuestras imágenes.
Para darle un estilo elegante al mostrar las imágenes, usaremos la librería FadeIn y FadeOut de JQuery, las cuales nos permiten agregar efectos de desvanecimiento en las imágenes.

La función “muestra” utilizará el efecto FadeIn para que cada imagen se muestre cada 250 ms, y de manera recursiva mande llamar a la función “mostrarimg”.

Para uso de la recursividad crearemos una variable con el nombre de “i” inicializándola en 0. Una vez iniciado el ciclo la variable ira aumentando de valor cada vez que se llame a “mostrarimg” esto dejará de funcionar una vez que la variable i alcance un valor fuera de la lista. Cuando la función devuelva un elemento que no existe, JQuery devolverá un objeto vacío, y deja de llamar a FadeIn.

Lo mismo haremos del lado de la función “ocultar” pero con las siguientes variantes, en vez de utilizar FadeIn utilizaremos FadeOut, le daremos un tiempo de 150 ms, para dar un efecto de borrado rápido. En vez de tomar a “0” como el valor default de la variable “i”, tomaremos el tamaño de nuestra lista como el valor.

Finalmente en vez de incrementar el valor dentro de nuestro ciclo, lo iremos disminuyendo, de esta manera primero desaparecerá la última imagen y el ciclo concluirá con la primera.

See the Pen
Imagenes
by JHilarioOjeda (@jhilarioojeda)
on CodePen.