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

¿Cuáles son los pros y contras técnicos de localStorage, sessionStorage, sesión y cookies, y cuándo usaría uno sobre el otro?

Esta es una pregunta de scope 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 para un navegador individual en una computadora / dispositivo individual. Cualquier requisito para almacenar datos de manera continua en todas las sesiones deberá involucrar a su lado del servidor de aplicaciones, muy probablemente utilizando una base de datos, pero posiblemente XML o un archivo de texto / CSV.

localStorage, sessionStorage y las cookies son todas soluciones de almacenamiento de clientes. Los datos de la sesión se guardan en el servidor donde permanece 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 borra cuando la pestaña o ventana está cerrada); sin embargo, sobrevive a las recargas de página ( guía de almacenamiento de 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 eliminados por el usuario, por lo que no debe confiar en la existencia continua de datos en ambos casos.

localStorage y sessionStorage son perfectos para la persistencia de datos no confidenciales necesarios dentro de las secuencias de comandos del cliente entre páginas (por ejemplo: preferencias, puntajes en los 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 para el almacenamiento de datos confidenciales o relacionados con la seguridad dentro de las aplicaciones.

Galletas

Esto también es cierto para las cookies, el usuario puede alterarlas de manera trivial, y los datos también pueden leerse en texto plano, de modo 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 un wifi abierto.

En el lado positivo, las cookies pueden tener un grado de protección aplicado a los riesgos de seguridad como Cross-Site Scripting (XSS) / Inyección de scripts configurando un indicador HTTP only, lo que significa que los navegadores modernos (compatibles) evitarán el acceso a las cookies y valores de JavaScript ( esto también evitará que tu JavaScript propio y 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 ha iniciado sesión; si tiene una copia de esa cookie, entonces, para todos los efectos, se convierte en ese usuario en la medida en que la aplicación web es preocupado, y tiene el mismo acceso a los datos y la funcionalidad que tiene el usuario.

Como las cookies se utilizan con fines de autenticación y persistencia de datos de usuario, todas 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 subsiguiente, todas las imágenes, hojas de estilo, scripts y fonts. Por este motivo, 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. Por lo general, las cookies se utilizan para almacenar identificadores de autenticación, sesión y seguimiento de publicidad. Por lo general, los tokens no son información legible por los humanos, sino identificadores encriptados vinculados a su aplicación o base de datos.

localStorage vs. sessionStorage vs. Cookies

En términos de capacidades, cookies, sessionStorage y localStorage solo le permiten almacenar cadenas: es posible convertir implícitamente valores primitivos al establecerlos (estos deberán ser convertidos nuevamente para usarlos como su tipo después de la lectura) pero no los Objetos o Matrices (es posible que JSON los serialice para almacenarlos usando las API). El almacenamiento de sesión generalmente le permitirá almacenar primitivas u objetos admitidos por su lenguaje / estructura de Servidor.

Del lado del cliente contra el 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 cookies 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 caducidad variable (que se renovará cada vez que el usuario visite), y dependiendo de su servidor / dataframe se almacenarán en proceso (lo que significa que los datos se perderán si el servidor web falla o se reinicia) o externamente en un servidor de estado o base de datos. Esto también es necesario cuando se usa 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.

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 deben enviarse junto 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 todas las sesiones abandonadas ocupen todos los recursos del servidor. Al utilizar datos de sesión, debe tener en cuenta la posibilidad de que los datos hayan expirado y se hayan perdido, especialmente en páginas con formularios largos. También se perderá si el usuario borra sus cookies o cambia navegadores / dispositivos.

Algunos frameworks / desarrolladores web usan entradas HTML ocultas para persistir datos de una página de un formulario a otro para evitar la caducidad de la sesión.

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

Para obtener más información sobre las tecnologías de almacenamiento de clientes, vea Inmersión en Html 5 .

  1. Almacenamiento local

    Pros :

    1. El almacenamiento web se puede ver de manera simplista como una mejora en las cookies, proporcionando una capacidad de almacenamiento mucho mayor. Si nos fijamos en el código fuente de Mozilla, podemos ver que 5120 KB ( 5 MB, que equivale a 2,5 millones de caracteres en Chrome) es el tamaño de almacenamiento predeterminado para todo un dominio. Esto le da mucho más espacio para trabajar que una cookie típica de 4 KB.
    2. Los datos no se envían al servidor por 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 la misma política de origen . Por lo tanto, 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, incluidos el nombre, el valor, la fecha de caducidad, etc. Para admitir la mayoría de los navegadores, mantenga el nombre bajo 4000 bytes y el tamaño total de la cookie en 4093 bytes.
    2. Los datos se envían 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.

      Por lo general, lo siguiente está permitido:

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

    Pros:

    1. 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 la ventana está cerrada, el almacenamiento se elimina.

    Contras:

    1. La información está disponible solo dentro de la ventana / pestaña en la que se configuró.
    2. Al igual que localStorage , tt funciona en la misma política de origen . Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

Estas son propiedades del objeto ‘ventana’ en JavaScript, al igual que el documento es una propiedad del objeto ventana que contiene objetos DOM.

La propiedad Almacenamiento de sesión mantiene un área de almacenamiento independiente para cada origen dado que está disponible durante la sesión de la página, es decir, siempre que el navegador esté abierto, incluidas las recargas y restauraciones de página.

El almacenamiento local hace lo mismo, pero persiste incluso cuando el navegador se cierra y se vuelve a abrir.

Puede configurar y recuperar los datos almacenados de la siguiente manera:

 sessionStorage.setItem('key', 'value'); var data = sessionStorage.getItem('key'); 

Del mismo modo para localStorage.

OK, LocalStorage ya que se llama almacenamiento local para sus navegadores, puede guardar hasta 10MB , SessionStorage hace lo mismo, pero como su nombre lo dice, está basado en sesiones y será eliminado luego de cerrar su navegador, también puede ahorrar menos que LocalStorage, como hasta 5MB , pero las cookies son muy pequeñas para almacenar datos en su navegador, que pueden ahorrar hasta 4 KB y se puede acceder a través del servidor o el navegador ambos …

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

LocalStorage, SessionStorage y Cookie

La API de almacenamiento web proporciona mecanismos mediante los cuales los navegadores pueden almacenar pares clave / valor de forma segura, de una manera mucho más intuitiva que el uso de cookies. La API de almacenamiento web amplía el objeto Window con dos nuevas propiedades: Window.sessionStorage y Window.localStorage . – al invocar uno de estos se creará una instancia del objeto de Almacenamiento, a través del cual se pueden establecer, recuperar y eliminar elementos de datos. Se utiliza un objeto de almacenamiento diferente para sessionStorage y localStorage para cada origen (dominio).

Los objetos de almacenamiento son simples almacenes de clave-valor , similares a los objetos, pero se mantienen intactos a través de las cargas de página .

 localStorage.colorSetting = '#a4509b'; localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); 

Las claves y los valores son siempre cadenas . Para almacenar cualquier tipo convert it to String y luego guárdelo. Siempre se recomienda utilizar métodos de Storage interface .

 var testObject = { 'one': 1, 'two': 2, 'three': 3 }; // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject)); // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject'); console.log('Converting String to Object: ', JSON.parse(retrievedObject)); 

Los dos mecanismos dentro de Almacenamiento web son los siguientes:

  • sessionStorage mantiene un área de almacenamiento separada para cada origen dado. Política de mismo origen que está disponible para la duración de la sesión de la página (siempre que el navegador esté abierto, incluidas las recargas y restauraciones de página).
  • localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierra y se vuelve a abrir.

Almacenamiento « El almacenamiento local escribe los datos en el disco, mientras que el almacenamiento de la sesión escribe los datos solo en la memoria. Cualquier información escrita en el almacenamiento de la sesión se purga cuando se cierra su aplicación.

El máximo almacenamiento disponible es diferente por navegador , pero la mayoría de los navegadores han implementado al menos el límite de almacenamiento máximo recomendado de w3c de 5 MB .

 +----------------+--------+---------+-----------+--------+ | | Chrome | Firefox | Safari | IE | +----------------+--------+---------+-----------+--------+ | LocalStorage | 10MB | 10MB | 5MB | 10MB | +----------------+--------+---------+-----------+--------+ | SessionStorage | 10MB | 10MB | Unlimited | 10MB | +----------------+--------+---------+-----------+--------+ 

Captura siempre la seguridad de LocalStorage y excede los errores de la cuota

  • QuotaExceededError : cuando los límites de almacenamiento exceden en esta función window.sessionStorage.setItem(key, value); , arroja una excepción DOMException “QuotaExceededError” si no se puede establecer el nuevo valor. (La configuración podría fallar si, por ejemplo, el usuario ha desactivado el almacenamiento del sitio o si se ha excedido la cuota).

    DOMException. QUOTA_EXCEEDED_ERR es 22 , ejemplo violín .

  • SecurityError : Uncaught SecurityError: Access to 'localStorage' is denied for this document .

     CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies. 

StorageEvent «El evento de almacenamiento se dispara en el objeto Window de un documento cuando cambia un área de almacenamiento. Cuando un agente de usuario debe enviar una notificación de almacenamiento para un documento, el agente de usuario debe poner en cola una tarea para activar un evento denominado almacenamiento en el objeto ventana del objeto del documento, utilizando StorageEvent.

Nota: Para ver un ejemplo del mundo real, vea Demo de almacenamiento web . mira el código fuente

Escuche el evento de almacenamiento en dom / Window para detectar cambios en el almacenamiento. violín


Cookies ( cookies web, cookies del navegador) Las cookies son datos, almacenados en pequeños archivos de texto como pares nombre-valor, en su computadora.

Acceso JavaScript usando Document.cookie

También se pueden crear nuevas cookies mediante JavaScript utilizando la propiedad Document.cookie, y si no se establece el indicador HttpOnly, también se puede acceder a las cookies existentes desde JavaScript.

 document.cookie = "yummy_cookie=choco"; document.cookie = "tasty_cookie=strawberry"; console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry" 

Mecanismo de gestión del estado HTTP de cookies seguras y HttpOnly

Las cookies se utilizan a menudo en la aplicación web para identificar a un usuario y su sesión autenticada

Al recibir una solicitud HTTP, un servidor puede enviar un encabezado Set-Cookie con la respuesta. La cookie generalmente es almacenada por el navegador, y luego la cookie se envía con solicitudes hechas al mismo servidor dentro de un encabezado HTTP de Cookie.

 Set-Cookie: = Set-Cookie: =; Expires= 

Las cookies de sesión se eliminarán cuando se cierre el cliente. No especifican las directivas Expira o Max-Age.

 Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/ 

Las cookies permanentes caducan en una fecha específica (caduca) o después de un período de tiempo específico (edad máxima).

 Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly 

El encabezado de solicitud HTTP de cookies contiene cookies HTTP almacenadas previamente enviadas por el servidor con el encabezado Set-Cookie. Las cookies HTTP-only no son accesibles a través de JavaScript a través de la propiedad Document.cookie, las API XMLHttpRequest y Request para mitigar ataques contra scripts de sitios cruzados (XSS).

Las cookies se utilizan principalmente con tres propósitos:

  • Gestión de sesiones «Inicios de sesión, carritos de compra, puntajes de juegos o cualquier otra cosa que el servidor deba recordar
  • Personalización «Preferencias de usuario, temas y otras configuraciones
  • Seguimiento (registro y análisis del comportamiento del usuario) «Las cookies tienen un dominio asociado. Si este dominio es el mismo que el dominio de la página en la que se encuentra, se dice que las cookies son de primera parte. Si el dominio es diferente, se dice que es una cookie de un tercero. Si bien las cookies propias se envían solo al servidor que las configura, una página web puede contener imágenes u otros componentes almacenados en servidores de otros dominios (como banners publicitarios). Las cookies que se envían a través de estos componentes de terceros se denominan cookies de terceros y se utilizan principalmente para publicidad y seguimiento en la Web.

Las cookies se inventaron para resolver el problema “cómo recordar información sobre el usuario”:

  • Cuando un usuario visita una página web, su nombre puede almacenarse en una cookie.
  • La próxima vez que el usuario visite la página, las cookies que pertenecen a la página se agregarán a la solicitud. De esta forma, el servidor obtiene los datos necesarios para “recordar” la información sobre los usuarios.

Ejemplo de GitHubGist


Como resumen,

  • localStorage persiste en diferentes tabs o ventanas, e incluso si cerramos el navegador, de acuerdo con la política de seguridad del dominio y las opciones del usuario sobre el límite de cuota.
  • El objeto sessionStorage no persiste si cerramos la pestaña (contexto de navegación de nivel superior) ya que no existe si navegamos a través de otra pestaña o ventana.
  • El almacenamiento web (sesión, local) nos permite guardar una gran cantidad de pares clave / valor y mucho texto, algo imposible de hacer a través de las cookies.
  • Las cookies que se usan para acciones delicadas deben tener solo una corta vida útil.
  • Cookies utilizadas principalmente para publicidad y seguimiento en la web. Ver, por ejemplo, los tipos de cookies utilizados por Google .
  • Las cookies se envían con cada solicitud, por lo que pueden empeorar el rendimiento (especialmente para las conexiones de datos móviles). Las API modernas para el almacenamiento del cliente son la API de almacenamiento web (localStorage y sessionStorage) e IndexedDB.

Almacenamiento local: almacena los datos de información del usuario sin fecha de vencimiento. Estos datos no se eliminarán cuando el usuario cierre las ventanas del navegador, estará disponible para el día, la semana, el mes y el año.

En el almacenamiento local puede almacenar datos sin conexión de 5-10mb.

 //Set the value in a local storage object localStorage.setItem('name', myName); //Get the value from storage object localStorage.getItem('name'); //Delete the value from local storage object localStorage.removeItem(name);//Delete specifice obeject from local storege localStorage.clear();//Delete all from local storege 

Almacenamiento de sesión: Es similar a la fecha de almacenamiento local, excepto que eliminará todas las ventanas cuando las ventanas del navegador estén cerradas por un usuario de la web.

En el almacenamiento de la sesión puede almacenar hasta 5 mb de datos

 //set the value to a object in session storege sessionStorage.myNameInSession = "Krishna"; 

Sesión : una sesión es una variable global almacenada en el servidor. A cada sesión se le asigna una identificación única que se utiliza para recuperar los valores almacenados.

Cookies : las cookies son datos almacenados en pequeños archivos de texto como pares nombre-valor en su computadora. Una vez que se ha establecido una cookie, todas las solicitudes de página que siguen devuelven el nombre y el valor de la cookie.

almacenamiento local para toda la sesión, almacenamiento de la sesión para una sesión de sesión. Los datos se envían al servidor para cada solicitud HTTP. También puedes publicar este artículo sobre webstorage

El almacenamiento web HTML proporciona dos objetos para almacenar datos en el cliente:

 window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is closed) 

Almacenamiento local:

El almacenamiento web se puede ver de manera simplista como una mejora en las cookies, proporcionando una capacidad de almacenamiento mucho mayor. El tamaño disponible es de 5MB, que es considerablemente más espacio para trabajar que una cookie típica de 4KB.

Los datos no se envían al servidor por cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que reduce la cantidad de tráfico entre el cliente y el servidor.

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. Funciona con la misma política de origen. Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

El objeto localStorage:

El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se borrarán cuando el navegador esté cerrado y estarán disponibles el día siguiente, la semana o el año.

 // Store localStorage.setItem("lastname", "Smith"); // Retrieve localStorage.getItem("lastname"); //Remove localStorage.removeItem("lastname"); 

Galletas:

Podemos establecer el tiempo de caducidad para cada cookie. El límite 4K es para toda la cookie, incluidos el nombre, el valor, la fecha de caducidad, etc. Para admitir la mayoría de los navegadores, mantenga el nombre bajo 4000 bytes y el tamaño total de la cookie en 4093 bytes.

Los datos se envían 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.

sessionStorage:

Es similar a localStorage. Los cambios solo están disponibles por ventana (o pestaña en navegadores como Chrome y Firefox). 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

La información está disponible solo dentro de la ventana / pestaña en la que se configuró.

Los datos no son persistentes, es decir, se perderán una vez que se cierre la ventana / pestaña. Al igual que localStorage, funciona en la misma política de origen. Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

    Intereting Posts