Saltar al contenido

¿Cuál es la diferencia entre localStorage, sessionStorage, session y cookies?

Investigamos en distintos sitios y así traerte la respuesta a tu duda, si tienes inquietudes puedes dejar tu pregunta y responderemos con mucho gusto.

Solución:

Esta es una pregunta de alcance extremadamente amplio, y muchos de los pros / contras serán contextuales a la situación.

En todos los casos, estos mecanismos de almacenamiento serán específicos de un navegador individual en una computadora / dispositivo individual. Cualquier requisito para almacenar datos de forma continua a lo largo de las sesiones deberá involucrar al lado del servidor de la aplicación, lo más probable es que utilice una base de datos, pero posiblemente XML o un archivo de texto / CSV.

localStorage, sessionStorage y cookies son todas soluciones de almacenamiento de clientes. Los datos de la sesión se guardan en el servidor donde permanecen bajo su control directo.

localStorage y sessionStorage

localStorage y sessionStorage son API relativamente nuevas (es decir, no todos los navegadores heredados las admitirán) y son casi idénticas (tanto en API como en capacidades) con la única excepción de la persistencia. sessionStorage (como su nombre indica) solo está disponible durante la sesión del navegador (y se elimina cuando se cierra la pestaña o ventana); sin embargo, sobrevive a las recargas de la página (guía de almacenamiento DOM de origen – Mozilla Developer Network).

Claramente, si los datos que está almacenando deben estar disponibles de manera continua, entonces localStorage es preferible a sessionStorage, aunque debe tener en cuenta que ambos pueden ser borrados por el usuario, por lo que no debe confiar en la existencia continua de datos en ninguno de los casos.

localStorage y sessionStorage son perfectos para conservar los datos no confidenciales necesarios dentro de los scripts del cliente entre páginas (por ejemplo: preferencias, puntajes en juegos). Los datos almacenados en localStorage y sessionStorage se pueden leer o cambiar fácilmente desde el cliente / navegador, por lo que no se debe confiar en ellos para el almacenamiento de datos confidenciales o relacionados con la seguridad dentro de las aplicaciones.

Galletas

Esto también es true en el caso de las cookies, el usuario puede manipularlas trivialmente y los datos también se pueden leer en texto sin formato, por lo que si desea almacenar datos confidenciales, la sesión es realmente su única opción. Si no está utilizando SSL, la información de las cookies también se puede interceptar en tránsito, especialmente en una red wifi abierta.

En el lado positivo, las cookies pueden tener un grado de protección aplicado contra riesgos de seguridad como Cross-Site Scripting (XSS) / Inyección de scripts al establecer una marca de solo HTTP, lo que significa que los navegadores modernos (compatibles) evitarán el acceso a las cookies y los valores de JavaScript ( esto también evitará que su propio JavaScript legítimo acceda a ellos). Esto es especialmente importante con las cookies de autenticación, que se utilizan para almacenar un token que contiene detalles del usuario que inició sesión; si tiene una copia de esa cookie, para todos los efectos, volverse ese usuario en lo que respecta a la aplicación web, y tienen el mismo acceso a los datos y la funcionalidad que tiene el usuario.

Dado que las cookies se utilizan con fines de autenticación y persistencia de los datos del usuario, todos Las cookies válidas para una página se envían desde el navegador al servidor para cada solicitud al mismo dominio: esto incluye la solicitud de página original, cualquier solicitud Ajax posterior, todas las imágenes, hojas de estilo, scripts y fuentes. Por esta razón, las cookies no deben usarse para almacenar grandes cantidades de información. El navegador también puede imponer límites al tamaño de la información que se puede almacenar en las cookies. Normalmente, las cookies se utilizan para almacenar tokens de identificación para autenticación, sesión y seguimiento de publicidad. Los tokens generalmente no son información legible por humanos en sí mismos, sino identificadores encriptados vinculados a su aplicación o base de datos.

localStorage frente a sessionStorage frente a cookies

En términos de capacidades, las cookies, sessionStorage y localStorage solo le permiten almacenar cadenas; es posible convertir implícitamente valores primitivos al configurar (estos deberán volver a convertirse para usarlos como su tipo después de la lectura) pero no objetos o matrices (es posible serializarlos en JSON para almacenarlos usando las API). El almacenamiento de sesiones generalmente le permitirá almacenar cualquier primitiva u objeto compatible con su lenguaje / marco del lado del servidor.

Del lado del cliente frente al lado del servidor

Como HTTP es un protocolo sin estado, las aplicaciones web no tienen forma de identificar a un usuario de visitas anteriores al regresar al sitio web, los datos de la sesión generalmente se basan en un token de cookie para identificar al usuario para visitas repetidas (aunque rara vez se pueden usar parámetros de URL para el mismo propósito). Los datos generalmente tendrán un tiempo de vencimiento deslizante (se renovará cada vez que el usuario los visite) y, según su servidor / marco, los datos se almacenarán en el proceso (lo que significa que los datos se perderán si el servidor web falla o se reinicia) o externamente en un servidor estatal o una base de datos. Esto también es necesario cuando se utiliza una granja de servidores web (más de un servidor para un sitio web determinado).

Como los datos de la sesión están completamente controlados por su aplicación (lado del servidor), es el mejor lugar para cualquier cosa sensible o segura por naturaleza.

La desventaja obvia de los datos del lado del servidor es la escalabilidad: los recursos del servidor son necesarios para cada usuario durante la sesión, y los datos necesarios del lado del cliente deben enviarse con cada solicitud. Como el servidor no tiene forma de saber si un usuario navega a otro sitio o cierra su navegador, los datos de la sesión deben caducar después de un tiempo determinado para evitar que todos los recursos del servidor sean ocupados por sesiones abandonadas. Por lo tanto, al utilizar datos de sesión, debe tener en cuenta la posibilidad de que los datos hayan caducado y se hayan perdido, especialmente en páginas con formularios largos. También se perderá si el usuario elimina sus cookies o cambia de navegador / dispositivo.

Algunos desarrolladores / frameworks web utilizan entradas HTML ocultas para conservar los datos de una página de un formulario a otra para evitar el vencimiento de la sesión.

localStorage, sessionStorage y las cookies están sujetos a reglas de “mismo origen”, lo que significa que los navegadores deben evitar el acceso a los datos, excepto al dominio que configuró la información para comenzar.

Para obtener más información sobre las tecnologías de almacenamiento del cliente, consulte Dive Into Html 5.

  1. Almacenamiento local

    Pros:

    1. El almacenamiento web puede verse de manera simplista como una mejora de las cookies, que proporciona una capacidad de almacenamiento mucho mayor. Si observa el código fuente de Mozilla, podemos ver que 5120 KB (5 MB que es igual 2,5 millones de caracteres en Chrome) es el tamaño de almacenamiento predeterminado para todo un dominio. Esto le da considerablemente más espacio para trabajar que una cookie típica de 4 KB.
    2. Los datos no se envían al servidor para cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que reduce la cantidad de tráfico entre el cliente y el servidor.
    3. Los datos almacenados en localStorage persisten hasta que se eliminan explícitamente. Los cambios realizados se guardan y están disponibles para todas las visitas actuales y futuras al sitio.

    Contras:

    1. Funciona con una política del mismo origen. Entonces, los datos almacenados solo estarán disponibles en el mismo origen.
  2. Galletas

    Pros:

    1. Comparado con otros, no hay nada AFAIK.

    Contras:

    1. El límite de 4K es para toda la cookie, incluido el nombre, el valor, la fecha de caducidad, etc. Para admitir la mayoría de los navegadores, mantenga el nombre por debajo de 4000 bytes y el tamaño total de la cookie por debajo de 4093 bytes.
    2. Los datos se envían de vuelta al servidor para cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que aumenta la cantidad de tráfico entre el cliente y el servidor.

      Normalmente, se permite lo siguiente:

      • 300 cookies en total
      • 4096 bytes por galleta
      • 20 galletas por dominio
      • 81920 octetos por dominio (Dadas 20 cookies de un tamaño máximo de 4096 = 81920 bytes).
  3. sessionStorage

    Pros:

    1. Esto es similar a localStorage.
    2. Los datos no son persistentes, es decir, los datos solo están disponibles por ventana (o pestaña en navegadores como Chrome y Firefox). Los datos solo están disponibles durante la sesión de la página. Los cambios realizados se guardan y están disponibles para la página actual, así como para futuras visitas al sitio en la misma ventana. Una vez que se cierra la ventana, se elimina el almacenamiento.

    Contras:

    1. Los datos solo están disponibles dentro de la ventana / pestaña en la que se establecieron.
    2. Igual que localStorage, funciona con una política del mismo origen. Entonces, los datos almacenados solo estarán disponibles en el mismo origen.

Verifique las pestañas entre pestañas: cómo facilitar la comunicación entre pestañas de navegador de origen cruzado.

OK, Almacenamiento local como se llama almacenamiento local para sus navegadores, puede ahorrar hasta 10 MB, Almacenamiento de sesión hace lo mismo, pero como su nombre lo dice, se basa en sesiones y se eliminará después de cerrar su navegador, también puede ahorrar menos que LocalStorage, como hasta 5 MB, pero Galletas son datos muy pequeños que se almacenan en su navegador, que pueden ahorrar 4 KB y se puede acceder a través del servidor o navegador tanto …

También creé la imagen a continuación para mostrar las diferencias de un vistazo:

LocalStorage, SessionStorage y Cookies

Aquí tienes las comentarios y calificaciones

Puedes sustentar nuestro cometido exponiendo un comentario y dejando una valoración te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *