localStorage vs sessionStorage vs Cookies – uma comparação detalhada

Os cookies estão conosco há muito tempo (o Internet Explorer v2 teve suporte para eles em outubro de 1995). Não há nada de errado com eles, e certamente tornaram a web um lugar mais agradável, mas depois de quase 25 anos muita coisa mudou.

O armazenamento local (você o encontrará em Armazenamento da Web no W3) é e não é um substituto para cookies. Isso é o que há de mais confuso nisso. Na maioria dos casos, você pode usar localStorage com segurança em vez de cookies e obter a impressão (errada) de que eles são os mesmos, enquanto não são. Continue lendo para ver um detalhamento prático de como e quando usar o localStorage para substituir os cookies.

Revolução ou evolução?

Armazenamento local, ou localStorage, ou armazenamento DOM ou armazenamento na web (não estou inventando esses nomes; todos eles estão em uso e todos fazem referência à mesma coisa) foram adotados no mundo real entre os navegadores populares em 2012 como um “HTML5 característica". Parecia um substituto divino para os biscoitos. Uma correção para solicitações inchadas que carregam dados desnecessários o tempo todo e limitações de tamanho. Embora ele “resolva” esses problemas, não é um substituto perfeito para os cookies.

E enquanto estamos no tópico de dados desnecessários. Você sabia que as solicitações não são a única coisa que pode ter um inchaço desnecessário, seu site também pode. Felizmente, existe uma solução, e chama-se WP Reset.

WP Reset é um plugin que vem com uma variedade de opções de reset que permitem que você faça coisas como remover dados acumulados e/ou add-ons (plugins, temas, usuários, widgets, conteúdo, etc.) mesmo limpando todo o seu site. Incrível, certo? Mas isso não é tudo. Entre outros recursos, este plug-in pode criar instantâneos de banco de dados, bem como coleções de plug-ins e temas que você pode instalar com um clique quantas vezes precisar. Definitivamente uma ferramenta que vale a pena conferir.

Mas, agora, vamos voltar a falar sobre localStorage.

Como o nome indica, os dados são armazenados localmente, no dispositivo do usuário. Portanto, ele não precisa ser transferido pela rede com cada solicitação HTTP reduzindo a pegada e nos dando muito mais espaço para salvar os dados. Esse paradigma “apenas local” é a diferença mais significativa entre cookies e armazenamento local. Os cookies podem ser lidos do lado do servidor e do lado do cliente, armazenamento local apenas no lado do cliente. Isso é tudo o que há para isso. Se o seu aplicativo depende muito da leitura de cookies do lado do servidor e da geração de conteúdo com base nele, a mudança para o armazenamento local significará reescrever o aplicativo. Se você usa cookies apenas para armazenar configurações como qual guia está ativa na interface, o armazenamento local é um substituto ideal.

Enganosamente semelhante

A tabela abaixo fornece uma visão clara das diferenças e casos de uso de cookies, localStorage e sessionStorage. Embora você possa olhar rapidamente para obter a resposta de que precisa e sair, recomendo ler as notas de rodapé um pouco longas que detalham mais. Sim, eu sei que você está ocupado e quer ver o próximo vídeo de gato, mas as coisas não são preto e branco, então cavar um pouco mais fundo fará bem a você.

Aprofundando o armazenamento na web e os cookies

A quantidade máxima de dados que você pode armazenar localmente depende do navegador. Não há garantias e se você quiser uma aposta segura, vá abaixo de 5 MB, para cerca de 2 MB. Use esta ferramenta útil para testar o tamanho máximo de armazenamento local permitido em seu navegador.

É comum os usuários bloquearem cookies de terceiros ou todos os cookies . A mesma regra se aplica ao armazenamento local. Não há garantias e seu aplicativo precisa funcionar (ou pelo menos não quebrar) em um ambiente em que o armazenamento local não esteja disponível.

Todos os cookies expiram em algum momento, mas as pessoas tendem a definir a vida útil para alguns anos, o que parece uma eternidade no tempo da Internet. O armazenamento local, por outro lado, nunca expira e está disponível até que o aplicativo ou o usuário o exclua. O armazenamento de sessão é limpo quando a guia ou janela é fechada – sem exceções.

“O que você quer dizer com apenas strings podem ser salvas ? Eu salvo objetos o tempo todo!” JSON permite que você salve objetos e outros tipos de dados na forma de uma string. A conversão é feita na leitura e escrita sem o seu conhecimento. Com uma biblioteca de som para lidar com cookies e armazenamento local, você não terá que pensar em tipos de dados. No entanto, isso não muda o fato de que apenas strings são suportadas nativamente.

Não há um único recurso do lado do cliente que todos os navegadores suportem . É um fato triste, mas ainda é um fato. Você pode verificar números específicos em Posso usar, mas no que diz respeito a cookies e armazenamento local, eu ignoraria todos os navegadores que não os suportam. São marginais e inferiores a 1%.

Você não pode acessar localStorage apenas por meio de processamento do lado do servidor. Você precisa de JS também. Quando o usuário solicita uma página e o PHP entra em ação (ou qualquer linguagem do lado do servidor que você use) para gerá-la, você não terá acesso a nenhum dado local, sessão ou permanente. Depois que a página for carregada e o JS entrar em ação, você poderá acessar os dados locais e fazer o que precisar - ajustar a interface do usuário ou utilizar o AJAX para enviar dados locais de volta ao servidor. Então, sim, você pode obter os dados locais de volta ao servidor, mas não da mesma maneira e no mesmo momento que faria com um cookie. Dependendo dos seus requisitos, isso pode ser um fator decisivo quando se trata de mudar de cookies para armazenamento local, portanto, planeje com antecedência!

Com o armazenamento local, nenhum dado é transferido entre o cliente e o servidor (a menos que haja um código que faça isso explicitamente). É ótimo para reduzir o tamanho da carga útil. Os cookies, por outro lado, são transferidos como campo de cabeçalho HTTP com cada solicitação no domínio definido. Isso não pode ser alterado ou desativado seletivamente.

Os usuários “não deveriam” acessar dados locais e alterá-los diretamente (fora do seu aplicativo), mas nada os impede de fazê-lo. Existem inúmeras ferramentas de depuração disponíveis para editar dados armazenados localmente. Portanto, não confie em dados locais ou suponha que o usuário não os tocou. Sempre assuma o pior.

Embora os cookies tenham um atributo “seguro” que você pode definir, isso não protege o cookie em trânsito do aplicativo para o navegador. Portanto, é melhor do que nada, mas longe de ser seguro. O armazenamento local, sendo uma tecnologia apenas do lado do cliente, não sabe ou se importa se você usa HTTP ou HTTPS. A segurança tem que vir da maneira como você lida com os dados. Não armazene dados confidenciais, como números de cartão de crédito ou senhas, em qualquer forma de armazenamento local! Sempre!

Um pouco de código para você começar

Este artigo não pretende ser um tutorial de armazenamento na Web JavaScript, mas para evitar problemas, aqui está um exemplo Hello World com armazenamento local;

// store a value
localStorage.setItem( 'name', 'John' );

// retrieve a value
localStorage.getItem( 'name' );

// remove the value
localStorage.removeItem( 'name' );

// only string values can be stored so for objects, use JSON
var post = {
  title: 'Cookies are old',
  author: 'Gordan'
}
localStorage.setItem( 'post', JSON.stringify( post ) );

// and to retrieve
var post = JSON.parse( localStorage.getItem( 'post' ) );

O código acima funciona e é o mais simples possível. No entanto, não recomendo o uso. Assim como os cookies, ninguém usa document.cookies para interagir com eles. Existem pequenas diferenças entre navegadores a serem levadas em consideração e, como eles armazenam apenas strings, você precisa stringificar e analisar com JSON em cada leitura e gravação. É por isso que usamos pequenas bibliotecas para nos ajudar a lidar com cookies como js-cookie. O mesmo vale para o armazenamento local. Colocar uma pequena camada de abstração entre seu código e a API ajudará a longo prazo. Eu recomendo store.js. Já existe há algum tempo, cuida de bobagens e fallbacks entre navegadores e ainda possui plugins úteis que expandem seus recursos. Se você estiver interessado em alguma prática de codificação, crie sua própria biblioteca e converta-a em um plugin jQuery.

Cookies são ruins, certo? Precisamos de algo novo!

Biscoitos não são ruins. Eles têm servido ao seu propósito por décadas e continuarão a fazê-lo, pois o armazenamento local não é um substituto “maçãs por maçãs”. Os cookies estão, no entanto, mostrando sinais de envelhecimento. Além disso, algumas de suas deficiências de design também não desaparecerão tão cedo. Ou seja, "poluindo" todas as solicitações no domínio com carga útil de cookie e tamanho máximo de carga útil pequena.

Inadequados e antigos ou não, os cookies estão aqui para ficar, então não pense que o armazenamento local assumirá o controle completamente em breve. No entanto, em alguns casos de uso, o armazenamento local é sem dúvida a melhor escolha.

Se você tem (muitos) dados para armazenar no lado do cliente que raramente são transferidos para o servidor e esses dados não contêm nada sensível – comece a usar o armazenamento local ! É precisamente para o que foi criado. Você criará um aplicativo mais rápido tornando todas as solicitações HTTP no domínio mais leves e obterá aquela sensação quente e difusa de usar algo novo.