W - I - LocalStorage vs Cookies

LocalStorage

Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.

El objeto Storage (API de almacenamiento web) nos permite almacenar datos de manera local en el navegador y sin necesidad de realizar alguna conexión a una base de datos.

Características

• Permiten almacenar entre 5MB y 10MB de información; incluyendo texto y multimedia.

• La información está almacenada en la computadora del cliente y NO es enviada en cada petición del servidor.

• Utilizan un número mínimo de peticiones al servidor para reducir el tráfico de la red.

• Previenen pérdidas de información cuando se desconecta de la red.

• La información es guardada por domino web (incluye todas las páginas del dominio).

¿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.

localStorage.getItem(“key”);

Con éste método obtenemos desde el LocalStorage el valor de nuestro elemento, donde “key” es el nombre de éste.

localStorage.removeItem(“key”);

Este método nos sirve para eliminar de nuestro almacenamiento un elemento de nuestro localStorage, donde “key”, es el nombre de éste.

localStorage.clear();

Para eliminar todas las variables guardadas en el localStorage.

Cookies

Las cookies son una herramienta de recopilación de datos que permite que los navegadores y los sitios intercambien información de los visitantes. Su finalidad es dar una mejor experiencia al usuario.

Son archivos temporales que un sitio web almacena en tu navegador con el fin de recordar tus interacciones en el sitio y mejorar tus visitas en el futuro. Gracias a las cookies, las páginas pueden acceder a información sobre tu actividad en línea.

La principal funcionalidad de las cookies es reconocer usuarios. Al habilitarlas, una persona puede regresar a una tienda en línea y continuar con la compra que dejó en el carrito o mantener actualizado un historial de búsqueda dentro del sitio. También sirven para almacenar información que normalmente se pide en distintos formularios de registro o de compras (nombre, ubicación, edad, números de cuenta, etc.) y es necesaria para aprender los comportamientos de los usuarios. Esto también facilita que otras empresas muestren publicidad personalizada.

Si tu web tiene cookies podrás:

• Guardar los artículos de compra en el carrito hasta que tus clientes logren finalizar el proceso.

• Recordar los datos de tus visitantes para evitar que tengan que llenarlos cada vez que regresen.

• Registrar las preferencias de las personas que interactúan con tu sitio, por ejemplo: idioma, ubicación o moneda con la que prefieren pagar.

• Personalizar el contenido que se muestra a las personas, desde artículos de blog que pueden interesarles hasta novedades de tus productos, según lo que han comprado o visto anteriormente (o lo que pertenece a la misma categoría o colección).

• Brindar una mejor experiencia de usuario, pues ayudan a que una página que ya se visitó se cargue con mayor rapidez.

¿Cómo funcionan las cookies?

Cuando ingresas a una página por primera vez, una cookie se descarga y se aloja en tu navegador. Si regresas, el sitio buscará una cookie que tenga su nombre. Al encontrarla podrá facilitar la navegación ya que te ha reconocido, adaptando la información que aparece en tu pantalla de acuerdo con tus interacciones anteriores en el sitio.

Tipos de cookies

Por su origen

Propias: son aquellas generadas directamente por el sitio web. Estas cookies se descargan en el equipo del visitante y son gestionadas para mejorar la experiencia de navegación del usuario en el futuro dentro de sus páginas.

De terceros: son aquellas que no son generadas por el sitio que es visitado, sino que tienen origen en servidores externos.

Por su temporalidad

Temporales: son cookies que solamente desempeñan su función durante el tiempo de navegación del visitante. Esto significa que al abandonar el sitio desaparecen estos archivos y solo están diseñados para mantener la información al visitar diferentes páginas del sitio o al refrescarlas.

Permanentes: las cookies permanentes se distinguen por tener un tiempo de vida mucho más largo. Esto significa que los archivos permanecerán indefinidamente en el equipo del visitante y estarán siempre disponibles para el momento en que vuelva a visitar el sitio.

Por su función

De análisis: permiten conocer el rendimiento de un sitio al recopilar la información de lo que los visitantes hacen en él. Estos datos ayudan a dimensionar los enlaces con más clics, las llamadas a la acción más exitosas, por mencionar algunos.

De preferencias: hacen posible que se guarde la personalización de un usuario al visitar un sitio: idioma, ubicación desde donde se ingresa.

De marketing: ayudan a crear perfiles analizando los comportamientos de los visitantes, como la navegación en otras páginas o las búsquedas que realizan.

Técnicas: son las que no se pueden borrar de los navegadores porque optimizan el funcionamiento de la web (cuando realizas una compra, compartes contenido en redes sociales) y permiten que un sitio gestione el tráfico que recibe.

LocalStorage vs Cookies

Cookies:

• Pros: Prácticamente todos los comercios electrónicos guardan la información del carrito en la cookie para persistirla y que no desaparezca tras el cierre del navegador.
• Recordar la información del formulario tras el envió del mismo.
• Almacenar preferencias de idioma y moneda.
• Setear una caducidad para la cookie.
• Permite que los servidores web sepan si el usuario ha iniciado sesión en el sitio web.
• Si no se permiten las cookies, el comportamiento anterior no ocurrirá y nunca recordará si se ha iniciado sesión o no.

Contras:

• Los datos no están encriptados.
• El tamaño de la solicitud está limitado a 4KB.
• La inyección de SQL se puede realizar desde una cookie.

LocalStorage:

Pros:

• Se puede acceder a los datos de forma fácil y rápida.
• No se requiere de conexión a Internet para acceder a los datos.
• Limite de almacenamiento: 5 MB por origen en Google Chrome, Mozilla Firefox y Opera. 10 MB por área de almacenamiento en Internet Explorer

Contras:

• La información guardada en él, no puede ser accesible directamente desde el servidor.
• Se requiere de copias de seguridad periódicas para evitar la perdida de los datos.
• El usuario es responsable de la seguridad de los datos.

Conclusión:

El almacenamiento en las cookies y en el LocalStorage tienen distintos propósitos. Como se ha comentado antes, las cookies pueden ser directamente leídas desde el servidor, en cambio, el LocalStorage solo guarda y permite leer los datos desde el cliente. Las cookies tienen un limite bastante más reducido de almacenamiento en comparación al LocalStorage y éste, técnicamente es más fácil de usar y te permite más con qué trabajar.

Lo que determinaría si se debe o no usar un método u otro para almacenar y persistir los datos del usuario en el sitio web sería si se requiere de estos en el cliente o en el servidor.