localstorage guardar entre encriptar diferencia html5 cookies local-storage session-storage

html5 - guardar - ¿Cuál es la diferencia entre almacenamiento local, almacenamiento de sesión, sesión y cookies?



localstorage vs sessionstorage vs cookies (8)

  1. LocalStorage

    Pros :

    1. El almacenamiento web se puede ver de manera simplista como una mejora de las cookies, lo que proporciona 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 un dominio completo. Esto le da mucho más espacio para trabajar que una cookie típica de 4KB.
    2. Los datos no se envían de vuelta 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 del sitio.

    Contras :

    1. Funciona en la política del mismo origen . Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

  2. Cookies

    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 bajo 4000 bytes y el tamaño total de la cookie bajo 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.

      Normalmente, se permiten los siguientes:

      • 300 galletas 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 al 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 borra el almacenamiento.

    Contras:

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

¿Cuáles son los pros y los contras técnicos del almacenamiento local, el almacenamiento de sesión, la sesión y las cookies, y cuándo utilizaría una sobre la otra?

De acuerdo, LocalStorage , como se denomina almacenamiento local para sus navegadores, puede ahorrar hasta 10MB , SessionStorage hace lo mismo, pero como su nombre lo dice, se basa en la sesión y se eliminará después de cerrar su navegador, también puede ahorrar menos que LocalStorage. como hasta 5 MB , pero las cookies son un almacenamiento de datos muy pequeño en su navegador, que puede ahorrar hasta 4 KB y se puede acceder a través del servidor o del navegador ...

También creé la imagen de abajo para mostrar las diferencias de un vistazo:

Esta es una pregunta de alcance muy 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 forma continua en todas las sesiones tendrá que involucrar al lado del servidor de aplicaciones, probablemente utilizando una base de datos, pero posiblemente XML o un archivo de texto / CSV.

LocalStorage, sessionStorage y las cookies son todas las soluciones de almacenamiento del cliente. Los datos de la sesión se guardan en el servidor donde permanece bajo su control directo.

Almacenamiento local y almacenamiento de sesión

localStorage y sessionStorage son API relativamente nuevas (lo que significa que 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 la ventana); sin embargo, sobrevive a las recargas de la página ( guía de almacenamiento de DOM de origen - Mozilla Developer Network ).

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

localStorage y sessionStorage son perfectos para la persistencia de 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 válido para las cookies, el usuario puede manipularlas de forma trivial y los datos también se pueden leer en texto simple, 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 puede interceptarse en tránsito, especialmente en una wifi abierta.

En el lado positivo, las cookies pueden tener un grado de protección aplicada contra riesgos de seguridad como Cross-Site Scripting (XSS) / Script inyectable al establecer una marca de solo HTTP que significa que los navegadores modernos (compatibles) evitarán el acceso a las cookies y los valores desde JavaScript esto también evitará que su propio y legítimo JavaScript 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, para todos los fines y propósitos, se convertirá en ese usuario en la medida en que la aplicación web es. en cuestión, y tienen el mismo acceso a los datos y la funcionalidad que tiene el usuario.

Como las cookies se utilizan con fines de autenticación y la persistencia de los datos del 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 la página original, cualquier solicitud Ajax subsiguiente, todas las imágenes. Hojas de estilo, scripts y fuentes. Por esta razón, las cookies no deben utilizarse para almacenar grandes cantidades de información. El navegador también puede imponer límites en el 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.

Almacenamiento local vs. almacenamiento de sesión vs. Cookies

En términos de capacidades, las cookies, sessionStorage y localStorage solo le permiten almacenar cadenas; es posible convertir implícitamente los valores primitivos al configurarlos (estos deberán volver a convertirse para usarlos como su tipo después de leerlos) pero no los Objetos o Arrays. (Es posible JSON serializarlos para almacenarlos usando las API). El almacenamiento de sesión generalmente le permitirá almacenar cualquier primitivo u objeto admitido por su lenguaje / marco Server Side.

Lado del cliente frente al servidor

Dado que 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 usualmente 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). Por lo general, los datos tendrán un tiempo de vencimiento variable (se renovarán cada vez que el usuario visite) y, dependiendo de 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. Un servidor de estado o 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 en su 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 todos 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. Al usar los datos de la sesión, por lo tanto, 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 los navegadores / dispositivos.

Algunos frameworks / desarrolladores web utilizan entradas HTML ocultas para conservar los 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 sujetas a las 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 del cliente, consulte Dive Into Html 5 .

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 de 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áginas.

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

Puede configurar y recuperar datos almacenados de la siguiente manera:

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

Del mismo modo para el almacenamiento local.

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

Los objetos de almacenamiento son almacenes clave-valor simples, similares a los objetos, pero se mantienen intactos a través de las cargas de la 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 del almacenamiento web son los siguientes:

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

Storage « El almacenamiento local escribe los datos en el disco, mientras que el almacenamiento de la sesión solo escribe los datos en la memoria. Todos los datos escritos en el almacenamiento de la sesión se eliminan cuando se cierra la aplicación.

El almacenamiento máximo disponible es diferente para cada 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 | +----------------+--------+---------+-----------+--------+

Siempre captura la seguridad de LocalStorage y la cuota supera los errores

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

Nota: para un ejemplo del mundo real, vea la demostración de almacenamiento web . mira el código fuente

Escuche el evento de almacenamiento en dom / Window para detectar cambios en el almacenamiento. fiddle

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

Acceso de JavaScript utilizando Document.cookie

Las nuevas cookies también se pueden crear a través de JavaScript usando la propiedad Document.cookie, y si la bandera HttpOnly no está establecida, 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 de 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 las solicitudes realizadas al mismo servidor dentro de un encabezado HTTP de Cookie.

Set-Cookie: <cookie-name>=<cookie-value> Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Las cookies de sesión se eliminarán cuando el cliente se cierre. No especifican las directivas Expires 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 la Cookie contiene cookies HTTP almacenadas previamente enviadas por el servidor con el encabezado Set-Cookie. Las cookies solo de HTTP no son accesibles a través de JavaScript a través de la propiedad Document.cookie, las API XMLHttpRequest y Request para mitigar los ataques contra los scripts entre sitios (XSS).

Las cookies se utilizan principalmente para tres propósitos:

  • Administración de sesiones «Inicios de sesión, carritos de compras, 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 de la página en la que se encuentra, se dice que las cookies son cookies propias. Si el dominio es diferente, se dice que es una cookie de terceros. Si bien las cookies de origen se envían solo al servidor que las configura, una página web puede contener imágenes u otros componentes almacenados en servidores en otros dominios (como anuncios 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 toda 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 se puede almacenar 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 manera, el servidor obtiene los datos necesarios para "recordar" la información sobre los usuarios.

Example GitHubGist

Como resumen,

  • LocalStorage persiste en diferentes pestañas 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.
  • 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 una cookie.
  • Las cookies que se utilizan para acciones sensibles solo deben tener una vida útil corta.
  • Cookies utilizadas principalmente para publicidad y seguimiento en la web. Vea por ejemplo los tipos de cookies utilizadas 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 para todas las sesiones, sesión de almacenamiento para una sesión sesión Los datos se envían de vuelta al servidor para cada solicitud HTTP. También puedes hacer realidad este artículo sobre webstorage

Almacenamiento local: mantiene almacenados 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 por día, semana, mes y año.

En el almacenamiento local puede almacenar 5-10mb datos fuera de línea.

//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 igual que la fecha de almacenamiento local, excepto que eliminará todas las ventanas cuando un usuario web cierre las ventanas del navegador.

En la sesión de almacenamiento 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 un ID único que se utiliza para recuperar valores almacenados.

Cookies : Las cookies son datos, almacenados en pequeños archivos de texto como pares de 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.

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 de las cookies, lo que proporciona una capacidad de almacenamiento mucho mayor. El tamaño disponible es de 5 MB, que es mucho más espacio para trabajar que una cookie típica de 4 KB.

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

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 del sitio. Funciona en la política del mismo 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 eliminarán cuando se cierre el navegador y estarán disponibles el siguiente día, semana o año.

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

Galletas:

Podemos establecer el tiempo de caducidad de cada cookie. 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 bajo 4000 bytes y el tamaño general de la cookie bajo 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 al almacenamiento local. 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 cerrada la ventana, se borra el almacenamiento.

Los datos solo están disponibles 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. Como localStorage, funciona en la política del mismo origen. Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.