HTML5 - Armazenamento na Web

O HTML5 apresenta dois mecanismos, semelhantes aos cookies de sessão HTTP, para armazenar dados estruturados no lado do cliente e superar as seguintes desvantagens.

Os cookies são incluídos em todas as solicitações HTTP, tornando assim o seu aplicativo da web mais lento, transmitindo os mesmos dados.
Os cookies são incluídos em cada solicitação HTTP, enviando dados não criptografados pela Internet.
Os cookies são limitados a cerca de 4 KB de dados. Não o suficiente para armazenar os dados necessários.

Os dois armazenamentos são session storage e local storage e eles seriam usados para lidar com diferentes situações.

As versões mais recentes de praticamente todos os navegadores suportam armazenamento HTML5, incluindo o Internet Explorer.

Armazenamento de Sessão

O Armazenamento de Sessão é projetado para cenários onde o usuário está realizando uma única transação, mas poderia estar realizando várias transações em janelas diferentes ao mesmo tempo.

Exemplo

Por exemplo, se um usuário compra passagens aéreas em duas janelas diferentes, usando o mesmo site. Se o site usasse cookies para rastrear qual ingresso o usuário estava comprando, à medida que o usuário clicasse de uma página a outra em ambas as janelas, o ingresso atualmente comprado "vazaria" de uma janela para a outra, potencialmente fazendo com que o usuário compre duas passagens para o mesmo vôo sem realmente perceber.

HTML5 introduz o atributo sessionStorage que seria usado pelos sites para adicionar dados ao armazenamento da sessão, e será acessível a qualquer página do mesmo site aberto naquela janela, ou seja,session e assim que você fechar a janela, a sessão será perdida.

A seguir está o código que definiria uma variável de sessão e acessaria essa variável -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -

Armazenamento Local

O armazenamento local é projetado para armazenamento que abrange várias janelas e dura além da sessão atual. Em particular, os aplicativos da Web podem desejar armazenar megabytes de dados do usuário, como documentos inteiros de autoria do usuário ou a caixa de correio de um usuário, no lado do cliente por motivos de desempenho.

Novamente, os cookies não lidam bem com esse caso, porque são transmitidos com cada solicitação.

Exemplo

HTML5 introduz o atributo localStorage que seria usado para acessar a área de armazenamento local de uma página sem limite de tempo e este armazenamento local estará disponível sempre que você usar essa página.

A seguir está o código que definiria uma variável de armazenamento local e acessaria essa variável toda vez que esta página for acessada, mesmo na próxima vez, quando você abrir a janela -

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -

Excluir armazenamento da web

Armazenar dados confidenciais na máquina local pode ser perigoso e pode deixar uma brecha de segurança.

Os dados de armazenamento da sessão seriam excluídos pelos navegadores imediatamente após o encerramento da sessão.

Para limpar uma configuração de armazenamento local, você precisa ligar localStorage.remove('key'); onde 'chave' é a chave do valor que você deseja remover. Se você quiser limpar todas as configurações, você precisa ligarlocalStorage.clear() método.

A seguir está o código que limparia o armazenamento local completo -

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

Isso produzirá o seguinte resultado -