Quais são os prós e os contras técnicos do localStorage, sessionStorage, session e cookies, e quando devo usar um sobre o outro?

Essa é uma questão de escopo extremamente amplo, e muitos dos prós / contras serão contextuais à situação.

Em todos os casos, esses mecanismos de armazenamento serão específicos para um navegador individual em um computador / dispositivo individual. Qualquer requisito para armazenar dados continuamente entre as sessões precisará envolver o lado do servidor de aplicativos - provavelmente usando um banco de dados, mas possivelmente XML ou um arquivo de texto / CSV.

localStorage, sessionStorage e cookies são todas as soluções de armazenamento do cliente. Os dados da sessão são mantidos no servidor em que permanecem sob seu controle direto.

localStorage e sessionStorage

localStorage e sessionStorage são APIs relativamente novas (ou seja, nem todos os navegadores herdados as suportam) e são quase idênticas (tanto em APIs quanto em recursos), com a única exceção de persistência. sessionStorage (como o nome sugere) está disponível apenas durante a sessão do navegador (e é excluído quando a guia ou janela é fechada) - no entanto, sobrevive às recargas de página ( guia de armazenamento DOM de origem - Mozilla Developer Network ).

Claramente, se os dados que você está armazenando precisam estar disponíveis continuamente, o localStorage é preferível ao sessionStorage - embora você deva observar que ambos podem ser limpos pelo usuário, para que você não deva confiar na existência contínua de dados nos dois casos.

localStorage e sessionStorage são perfeitos para persistir dados não sensíveis necessários nos scripts do cliente entre páginas (por exemplo: preferências, pontuações nos jogos). Os dados armazenados no localStorage e sessionStorage podem ser facilmente lidos ou alterados no cliente / navegador, portanto, não se deve confiar no armazenamento de dados sensíveis ou relacionados à segurança nos aplicativos.

Biscoitos

Isso também se aplica aos cookies, que podem ser modificados trivialmente pelo usuário e os dados também podem ser lidos em texto sem formatação - portanto, se você deseja armazenar dados confidenciais, a sessão é realmente a sua única opção. Se você não estiver usando SSL, as informações sobre cookies também poderão ser interceptadas em trânsito, especialmente em um wifi aberto.

Do lado positivo, os cookies podem ter um grau de proteção aplicado a riscos de segurança, como injeção de scripts entre sites (XSS) / Script, definindo um sinalizador somente HTTP, o que significa que navegadores modernos (de suporte) impedirão o acesso aos cookies e valores do JavaScript ( isso também impedirá que seu próprio JavaScript legítimo os acesse). Isso é especialmente importante com os cookies de autenticação, que são usados ​​para armazenar um token contendo detalhes do usuário que efetuou logon - se você tiver uma cópia desse cookie, para todos os efeitos, você se tornará esse usuário até o aplicativo da Web. em causa e tenha o mesmo acesso aos dados e funcionalidades que o usuário possui.

Como os cookies são usados ​​para fins de autenticação e persistência dos dados do usuário, todos os cookies válidos para uma página são enviados do navegador para o servidor para cada solicitação no mesmo domínio - isso inclui a solicitação da página original, as solicitações subsequentes do Ajax, todas as imagens, folhas de estilo, scripts e fontes. Por esse motivo, os cookies não devem ser usados ​​para armazenar grandes quantidades de informações. O navegador também pode impor limites ao tamanho das informações que podem ser armazenadas nos cookies. Normalmente, os cookies são usados ​​para armazenar tokens de identificação para autenticação, sessão e rastreamento de publicidade. Os tokens normalmente não são informações legíveis por humanos, mas identificadores criptografados vinculados ao seu aplicativo ou banco de dados.

localStorage vs. sessionStorage vs. Cookies

Em termos de recursos, cookies, sessionStorage e localStorage apenas permitem armazenar cadeias - é possível converter implicitamente valores primitivos ao definir (eles precisarão ser convertidos novamente para usá-los como seu tipo após a leitura), mas não Objetos ou Matrizes (é possível JSON serializá-los para armazená-los usando as APIs). O armazenamento da sessão geralmente permite que você armazene quaisquer primitivos ou objetos suportados pelo seu idioma / estrutura do servidor.

Lado do cliente vs. lado do servidor

Como o HTTP é um protocolo sem estado - os aplicativos da web não têm como identificar um usuário de visitas anteriores ao retornar ao site - os dados da sessão geralmente dependem de um token de cookie para identificar o usuário para visitas repetidas (embora raramente parâmetros de URL possam ser usados ​​para o mesmo propósito). Os dados geralmente têm um tempo de expiração deslizante (renovado toda vez que o usuário visita) e, dependendo do servidor / estrutura, os dados serão armazenados em processo (o que significa que os dados serão perdidos se o servidor da web travar ou for reiniciado) ou externamente em um servidor de estado ou banco de dados. Isso também é necessário ao usar um web farm (mais de um servidor para um determinado site).

Como os dados da sessão são completamente controlados pelo seu aplicativo (servidor), é o melhor local para qualquer coisa sensível ou segura por natureza.

A desvantagem óbvia dos dados do lado do servidor é a escalabilidade - os recursos do servidor são necessários para cada usuário durante a sessão e que todos os dados necessários do lado do cliente devem ser enviados a cada solicitação. Como o servidor não tem como saber se um usuário navega para outro site ou fecha o navegador, os dados da sessão devem expirar após um determinado período para evitar que todos os recursos do servidor sejam ocupados por sessões abandonadas. Ao usar os dados da sessão, você deve, portanto, estar ciente da possibilidade de que os dados tenham expirado e tenham sido perdidos, especialmente em páginas com formulários longos. Também será perdido se o usuário excluir seus cookies ou alternar navegadores / dispositivos.

Algumas estruturas / desenvolvedores da Web usam entradas HTML ocultas para manter os dados de uma página de um formulário para outra, para evitar a expiração da sessão.

localStorage, sessionStorage e cookies estão sujeitos a regras de "mesma origem", o que significa que os navegadores devem impedir o acesso aos dados, exceto o domínio que define as informações para começar.

Para ler mais sobre as tecnologias de armazenamento do cliente, consulte Dive Into Html 5 .

1. LocalStorage

   Prós :

   1. O armazenamento na Web pode ser visto de maneira simplista como uma melhoria nos cookies, oferecendo uma capacidade de armazenamento muito maior. Se você olhar para o código-fonte da Mozilla, podemos ver que 5120 KB ( 5 MB é igual a 2,5 milhões de caracteres no Chrome) é o tamanho de armazenamento padrão para um domínio inteiro. Isso oferece muito mais espaço para trabalhar do que um cookie típico de 4KB.
   2. Os dados não são enviados de volta ao servidor para todas as solicitações HTTP (HTML, imagens, JavaScript, CSS etc.) - reduzindo a quantidade de tráfego entre cliente e servidor.
   3. Os dados armazenados no localStorage persistem até serem excluídos explicitamente. As alterações feitas são salvas e disponíveis para todas as visitas atuais e futuras ao site.

   Contras :

   1. Funciona na política de mesma origem . Portanto, os dados armazenados estarão disponíveis apenas na mesma origem.

2. Biscoitos

   Prós:

   1. Comparado a outros, não há nada AFAIK.

   Contras:

   1. O limite de 4K é para todo o cookie, incluindo nome, valor, data de validade etc. Para oferecer suporte à maioria dos navegadores, mantenha o nome em 4000 bytes e o tamanho geral do cookie em 4093 bytes.

   2. Os dados são enviados de volta ao servidor para todas as solicitações HTTP (HTML, imagens, JavaScript, CSS etc.) - aumentando a quantidade de tráfego entre cliente e servidor.

      Normalmente, o seguinte é permitido:

      • 300 cookies no total
      • 4096 bytes por cookie
      • 20 cookies por domínio
      • 81920 bytes por domínio (dados 20 cookies de tamanho máximo 4096 = 81920 bytes.)

3. sessionStorage

   Prós:

   1. É semelhante a localStorage.
   2. Os dados não são persistentes, ou seja, os dados estão disponíveis apenas por janela (ou guia em navegadores como Chrome e Firefox). Os dados estão disponíveis apenas durante a sessão da página. As alterações feitas são salvas e disponíveis para a página atual, bem como futuras visitas ao site na mesma janela. Depois que a janela é fechada, o armazenamento é excluído.

   Contras:

   1. Os dados estão disponíveis apenas dentro da janela / guia em que foram configurados.
   2. Como localStorage, funciona na política de mesma origem . Portanto, os dados armazenados estarão disponíveis apenas na mesma origem.

Check - out em várias guias - como facilitar a comunicação fácil entre as guias do navegador de várias origens.

OK, o LocalStorage , como é chamado armazenamento local para seus navegadores, pode economizar até 10 MB , o SessionStorage faz o mesmo, mas como o próprio nome diz, é baseado em sessão e será excluído após o fechamento do navegador, também pode economizar menos que o LocalStorage, como até 5 MB , mas os cookies são muito pequenos, armazenando dados no seu navegador, que podem economizar 4KB e podem ser acessados ​​através do servidor ou navegador ...

Também criei a imagem abaixo para mostrar as diferenças rapidamente:

Essas são propriedades do objeto 'window' em JavaScript, assim como o documento é uma propriedade do objeto window que contém objetos DOM.

A propriedade Session Storage mantém uma área de armazenamento separada para cada origem fornecida, disponível durante a sessão da página, ou seja, desde que o navegador esteja aberto, incluindo recarregamentos e restaurações de páginas.

O armazenamento local faz a mesma coisa, mas persiste mesmo quando o navegador é fechado e reaberto.

Você pode definir e recuperar dados armazenados da seguinte maneira:

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

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

Da mesma forma para localStorage.

Armazenamento local: mantém os dados de informações do usuário armazenados sem data de vencimento. Esses dados não serão excluídos quando o usuário fechar as janelas do navegador, estarão disponíveis por dia, semana, mês e ano.

No armazenamento local, pode armazenar dados offline de 5 a 10 mb.

//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

Armazenamento de sessão: É o mesmo que a data de armazenamento local, exceto que excluirá todas as janelas quando as janelas do navegador forem fechadas por um usuário da web.

Na sessão, o armazenamento pode armazenar até 5 mb de dados

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

Sessão : Uma sessão é uma variável global armazenada no servidor. A cada sessão é atribuído um ID exclusivo, usado para recuperar valores armazenados.

Cookies : os cookies são dados armazenados em pequenos arquivos de texto como pares nome-valor no seu computador. Depois que um cookie é definido, todas as solicitações de página a seguir retornam o nome e o valor do cookie.

A API de armazenamento na Web fornece mecanismos pelos quais os navegadores podem armazenar com segurança pares de chave / valor, de uma maneira muito mais intuitiva do que usar cookies. A API de armazenamento na Web estende o Windowobjeto com duas novas propriedades - Window.sessionStoragee Window.localStorage. - invocar um deles criará uma instância do objeto Storage, através da qual os itens de dados podem ser configurados, recuperados e removidos. Um objeto de armazenamento diferente é usado para sessionStoragee localStoragepara cada origem (domínio).

Os objetos de armazenamento são simples armazenamentos de valores-chave , semelhantes aos objetos, mas permanecem intactos durante o carregamento da página .

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

As chaves e os valores são sempre strings . Para armazenar qualquer tipoconvert it to Stringe depois armazená-lo. É sempre recomendável usarStorage interfacemé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));

Os dois mecanismos no armazenamento na Web são os seguintes:

• sessionStorage mantém uma área de armazenamento separada para cada origem especificada ^{Política de mesma origem} disponível durante toda a sessão da página (desde que o navegador esteja aberto, incluindo recarregamentos e restaurações de páginas).
• localStorage faz a mesma coisa, mas persiste mesmo quando o navegador é fechado e reaberto.

Armazenamento « O armazenamento local grava os dados no disco, enquanto o armazenamento da sessão grava os dados somente na memória. Todos os dados gravados no armazenamento da sessão são eliminados quando o aplicativo sai.

O armazenamento máximo disponível é diferente por navegador , mas a maioria dos navegadores implementou pelo menos o limite máximo recomendado de armazenamento de 5 MB do w3c .

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

Sempre pegue erros de segurança e cota excedidos no LocalStorage

• QuotaExceededError : quando os limites de armazenamento excedem essa funçãowindow.sessionStorage.setItem(key, value);, ele lança uma exceção DOMException "QuotaExceededError" se o novo valor não puder ser definido. (A configuração poderá falhar se, por exemplo, o usuário desabilitar o armazenamento do site ou se a cota tiver sido excedida.)

  DOMException. QUOTA_EXCEEDED_ERR é 22 , exemplo violino .

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

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

StorageEvent «O evento de armazenamento é acionado no objeto Window de um documento quando uma área de armazenamento é alterada. Quando um agente do usuário deve enviar uma notificação de armazenamento para um Documento, o agente do usuário deve enfileirar uma tarefa para disparar um evento chamado storage no objeto Window do objeto Document, usando StorageEvent.

Nota: Para um exemplo do mundo real, consulte Demonstração do armazenamento na Web . ^{confira o código fonte}

Ouça o evento de armazenamento em dom / Window para capturar alterações no armazenamento. violino .

Cookies (cookie da web, cookie do navegador) Cookies são dados armazenados em pequenos arquivos de texto como pares nome-valor, no seu computador.

Acesso JavaScript usando Document.cookie

Novos cookies também podem ser criados via JavaScript usando a propriedade Document.cookie e, se o sinalizador HttpOnly não estiver definido, os cookies existentes também poderão ser acessados ​​no JavaScript.

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

Cookies Secure e HttpOnly ^{Mecanismo de Gerenciamento de Estado HTTP}

Os cookies são frequentemente usados ​​em aplicativos da web para identificar um usuário e sua sessão autenticada

Ao receber uma solicitação HTTP, um servidor pode enviar um cabeçalho Set-Cookie com a resposta. O cookie geralmente é armazenado pelo navegador e, em seguida, o cookie é enviado com solicitações feitas para o mesmo servidor dentro de um cabeçalho HTTP do Cookie.

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

Os cookies de sessão serão removidos quando o cliente for desligado. Eles não especificam as diretivas Expir ou Max-Age.

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

Os cookies permanentes expiram em uma data específica (expira) ou após um período específico (idade máxima).

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

O cabeçalho de solicitação HTTP de cookie contém cookies HTTP armazenados anteriormente enviados pelo servidor com o cabeçalho Set-Cookie. Os cookies somente HTTP não são acessíveis via JavaScript através da propriedade Document.cookie, as APIs XMLHttpRequest e Request para atenuar ataques contra scripts entre sites (XSS).

Os cookies são usados ​​principalmente para três propósitos:

• Gerenciamento de sessões «Logins, carrinhos de compras, resultados de jogos ou qualquer outra coisa que o servidor deva lembrar
• Personalização «Preferências do usuário, temas e outras configurações
• Rastreamento (Gravando e analisando o comportamento do usuário) «Os cookies têm um domínio associado a eles. Se esse domínio for igual ao domínio da página em que você está, os cookies serão considerados cookies primários. Se o domínio for diferente, é considerado um cookie de terceiros. Embora os cookies primários sejam enviados apenas ao servidor que os define, uma página da Web pode conter imagens ou outros componentes armazenados em servidores em outros domínios (como banners de anúncios). Os cookies enviados por esses componentes de terceiros são chamados de cookies de terceiros e são usados ​​principalmente para publicidade e rastreamento na Web.

Os cookies foram inventados para resolver o problema "como lembrar informações sobre o usuário":

• Quando um usuário visita uma página da web, seu nome pode ser armazenado em um cookie.
• Na próxima vez que o usuário visitar a página, os cookies pertencentes à página serão adicionados à solicitação. Dessa forma, o servidor obtém os dados necessários para "lembrar" as informações sobre os usuários.

Exemplo GitHubGist

Como resumo,

• localStorage persiste em diferentes guias ou janelas e, mesmo que fechemos o navegador, de acordo com a política de segurança do domínio e as opções do usuário sobre o limite de cota.
• O objeto sessionStorage não persiste se fecharmos a guia (contexto de navegação de nível superior), pois não existe se navegarmos por outra guia ou janela.
• O armazenamento na Web (sessão, local) permite salvar uma grande quantidade de pares de chave / valor e muito texto, algo impossível de fazer via cookie.
• Os cookies usados ​​para ações confidenciais devem ter uma vida útil curta.
• Cookies usados ​​principalmente para publicidade e rastreamento na Web. Veja, por exemplo, os tipos de cookies usados ​​pelo Google .
• Os cookies são enviados a cada solicitação, para piorar o desempenho (especialmente para conexões de dados móveis). As APIs modernas para armazenamento do cliente são a API de armazenamento na Web (localStorage e sessionStorage) e o IndexedDB.

LocalStorage :

• O armazenamento na Web pode ser visto de maneira simplista como uma melhoria nos cookies, fornecendo uma capacidade de armazenamento muito maior. O tamanho disponível é de 5 MB, o que significa muito mais espaço para trabalhar do que um cookie típico de 4KB.

• Os dados não são enviados de volta ao servidor para todas as solicitações HTTP (HTML, imagens, JavaScript, CSS etc.) - reduzindo a quantidade de tráfego entre cliente e servidor.

• Os dados armazenados no localStorage persistem até serem excluídos explicitamente. As alterações feitas são salvas e disponíveis para todas as visitas atuais e futuras ao site.

• Funciona na política de mesma origem. Portanto, os dados armazenados estarão disponíveis apenas na mesma origem.

Biscoitos:

• Podemos definir o tempo de expiração para cada cookie

• O limite de 4K é para todo o cookie, incluindo nome, valor, data de validade etc. Para oferecer suporte à maioria dos navegadores, mantenha o nome em 4000 bytes e o tamanho geral do cookie em 4093 bytes.

• Os dados são enviados de volta ao servidor para todas as solicitações HTTP (HTML, imagens, JavaScript, CSS etc.) - aumentando a quantidade de tráfego entre cliente e servidor.

sessionStorage:

• É semelhante ao localStorage.

• As alterações estão disponíveis apenas por janela (ou guia em navegadores como Chrome e Firefox). As alterações feitas são salvas e disponíveis para a página atual, bem como futuras visitas ao site na mesma janela. Depois que a janela é fechada, o armazenamento é excluído. Os dados estão disponíveis apenas dentro da janela / guia em que foram configurados.

• Os dados não são persistentes, ou seja, serão perdidos quando a janela / guia for fechada. Como localStorage, funciona na política de mesma origem. Portanto, os dados armazenados estarão disponíveis apenas na mesma origem.

aqui está uma revisão rápida e com um entendimento simples e rápido

do professor Beau Carnes do freecodecamp