1. LocalStorage

   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 5120KB (5MB 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 típica cookie de 4KB.
   2. Los datos son no se envía 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 eliminen explícitamente. Los cambios realizados se guardan y están disponibles para todas las visitas actuales y futuras al sitio.

   Cons :

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

2. Cookies

   Ventajas:

   1. Comparado con otros, no hay nada AFAIK.

   Contras:

   1. El límite 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 general 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) - aumentar la cantidad de tráfico entre el cliente y el servidor.

      Normalmente, se permiten lo siguiente:

      • 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

   Ventajas:

   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 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, el almacenamiento se elimina.

   Contras:

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

Estas son propiedades del objeto 'window' en JavaScript, al igual que document es una de las propiedades del objeto window que contiene objetos DOM.

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

El almacenamiento local hace lo mismo, pero persiste incluso cuando el navegador está cerrado y reabierto.

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

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

Similar para localStorage.

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

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

La API de almacenamiento web proporciona mecanismos mediante los cuales los navegadores pueden almacenar de forma segura pares clave/valor, de una manera mucho más intuitiva que el uso de cookies. La API de almacenamiento web extiende el objeto Window con dos propiedades nuevas: Window.sessionStorage y Window.localStorage. - invocar uno de estos 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 clave-valor, similares a los objetos, pero permanecen 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árdalo. Siempre se recomienda utilizar Storage interface métodos.

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: sigue:

• Cursos de formación mantiene un área de almacenamiento separada para cada origen dado^{Política del mismo origen} está disponible durante la duración de 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 vuelve a abrir.

Almacenamiento " almacenamiento Local escribe los datos en el disco, mientras que el almacenamiento de sesiones escribe los datos solo en la memoria. Todos los datos escritos en el almacenamiento de la sesión se purgan cuando se cierra la aplicación.

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

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

Siempre captura errores de seguridad de almacenamiento local y de rebasamiento de cuota

• QuotaExceededError: Cuando los límites de almacenamiento exceden esta función window.sessionStorage.setItem(key, value);, lanza una excepción DOMException "QuotaExceededError" si el nuevo valor no se pudo establecer. (La configuración podría fallar si, por ejemplo, el usuario ha deshabilitado el almacenamiento para el sitio, o si se ha excedido la cuota.)

  DOMException. QUOTA_EXCEEDED_ERR es 22, ejemplo fiddle.

• 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 activa en el objeto Ventana de un documento cuando cambia un área de almacenamiento. Cuando un agente de usuario va a enviar 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 Ventana del objeto del documento, utilizando StorageEvent.

Nota: Para un ejemplo del mundo real, vea Web Storage Demo. ^{echa un vistazo al código fuente}

Escuche el evento de almacenamiento en dom / Window para capturar los cambios en el almacén. fiddle .

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

Acceso JavaScript usando el documento .cookie

También se pueden crear nuevas cookies a través de JavaScript utilizando el Documento.cookie, y si el indicador HttpOnly no está establecido, se puede acceder a las cookies existentes desde JavaScript como bien.

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

Cookies seguras y HttpOnly^{Mecanismo de Administración de Estado HTTP}

Las cookies se utilizan a menudo en aplicaciones 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 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 se apague el cliente. No especifican las directivas Expires o Max-Age.

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

Las cookies permanentes expiran 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 Cookie contiene cookies HTTP almacenadas previamente enviadas por el servidor con el encabezado Set-Cookie. Las cookies de solo HTTP no son accesibles a través de JavaScript a través de documento.cookie property, las API de XMLHttpRequest y Request para mitigar los ataques contra cross-site scripting (XSS).

Las cookies se utilizan principalmente para tres propósitos:

• Administración de sesiones " Inicios de sesión, carritos de compras, puntuaciones de juegos o cualquier otra cosa que el servidor deba recordar
• Personalización " Preferencias de usuario, temas y otros ajustes
• Seguimiento (Registro y análisis del comportamiento del usuario) " Las cookies tienen un dominio asociado a ellos. Si este dominio es el mismo que el dominio de la página en la que se encuentra, se dice que las cookies son una cookie de origen. Si el dominio es diferente, se dice que es una cookie de terceros. Mientras que 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 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 a través de 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 ser almacenado en una cookie.
• La próxima vez que el usuario visite la página, se agregarán cookies pertenecientes a la página a la solicitud. De esta manera el servidor obtiene los datos necesarios para "recordar" información sobre los usuarios.

GitHubGist Example

As 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.
• 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 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. Consulte, 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 de clientes son la API de almacenamiento web (localStorage y sessionStorage) e IndexedDB.

Almacenamiento local: Mantiene almacenar los datos de información del usuario sin fecha de caducidad 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 5-10mb datos sin conexión.

//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 las ventanas del navegador se cierren por un usuario web.

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

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

Session: 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 los valores almacenados.

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

LocalStorage:

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 de vuelta al servidor para cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que reduce la cantidad de tráfico entre cliente y servidor.

Los datos almacenados en localStorage persisten hasta que se eliminen explícitamente. Los cambios realizados se guardan y están disponibles para todas las visitas actuales y futuras al 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 al día, semana o año.

// Store
 localStorage.setItem("lastname", "Smith");

// Retrieve

localStorage.getItem("lastname");

//Remove

localStorage.removeItem("lastname");

Cookies:

Podemos establecer el tiempo de caducidad para 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 por debajo de 4000 bytes y el tamaño general de la cookie por debajo de 4093 bytes.

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

Los datos solo están disponibles dentro de la ventana/pestaña en la que se establecieron.

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

Almacenamiento local para todas las sesiones, almacenamiento de sesiones para una sesión sesión Los datos se envían de vuelta al servidor para cada solicitud HTTP. también puede real este artículo a ahora sobre webstorage