Local Storage do HTML 5

Em aplicações web, principalmente quando criadas em single pages, é necessário armazenar informações no próprio browser, o localStorage nos permite fazer isso.

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Front-end - TUTORIAL

Última atualização em: | 8950 Visualizações

Quando você precisa gravar informações no próprio browser, sem enviar para o servidor, seja para guardar um valor, um código ou um texto, no HTML5 foi criado o localStorage. O localStorage nós permite fazer isso de maneira muito simples e prática, tanto para gravar quanto para realizar a leitura dos dados armazenados.

O que é o HTML Local Storage?

Resumidamente é uma forma simples para gravar dados no navegador. Antes em casos que havia a necessidade de gravar dados no navegador era necessário utilizar cookies, com o local storage isso se tornou muito mais simples.

Quais browsers suportam Storage?

Praticamente todos os browsers da atualidade já tem suporte ao localStorage. Segue uma lista simples de versões mínimas para suporte de acordo com o w3c:

BrowserVersão
4.0
3.5
4.0
11.5

Mas se você quiser testar o suporte do browser em sua aplicação, você pode fazer isso utilizando o código:
if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

Como usar o localStorage e o sessionStorage?

Você pode utilizar duas maneiras para gravar dados no navegado:

  • localStorage - Os dados são mantidos sem data de expiração
  • sessionStorage - Os dados são mantidos na sessão e serão perdidos assim que a aba do navegador for fechada

A utilização do localStorage ou do sessionStorage são bastante similares, vamos ver alguns casos de uso para entender melhor.

Usando o localStorage

Para utilizar o localStorage basta estar dentro de um bloco de javascript em sua página HTML e pode utilizar da seguinte maneira:

// adicionar valores
localStorage.setItem('meuNome', 'wolmir garbin');

// obtendo valores
alert( localStorage.getItem('meuNome') );

Observe que:

  • Os valores são passados em um conjunto de chave/valor, no caso do exemplo, name=meuNome e value=wolmir garbin
  • Para recuperar os valores sempre deve utilizar o name, no caso do exemplo meuNome

Outra forma para adicionar e recuperar valores é mostrado no código abaixo:

// adicionar valores
localStorage.meuNome = 'wolmir garbin';

// obtendo valores
alert( localStorage.meuNome );

O que deixa o código mais simples ainda de ser utilizado.

Remover elementos de localStorage

Para remover um item, pode utilizar o código:

localStorage.removeItem("meuNome");

Limpar todo o localStorage

Para limpar e remover todos os itens de um localStorage pode utilizar o seguinte código:

localStorage.clear();

Usando o sessionStorage

O sessionStorage funciona da mesma forma que o localStorage, as explicações dadas acima também são validas. Veja o código:

// adicionar valores
sessionStorage.setItem('meuNome', 'wolmir garbin');

// obtendo valores
alert( sessionStorage.getItem('meuNome') );

// remover valores
sessionStorage.removeItem("meuNome");

// remover todos os valores
sessionStorage.clear();

Qualquer dúvida deixe seu comentário que estaremos prontos para te ajudar!


Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!