Local Storage do HTML 5

Postado em por Wolmir Cezer Garbin em Front-end | 78 Visualizações
Última atualização em:

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.

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!

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Markdown é uma ferramenta de conversão de texto para HTML. Com ele é possível você marcar títulos, listas, tabelas de forma limpa, legível e precisa.

Ler mais

Markdown é uma ferramenta de conversão de texto para HTML. Com markdown é possível marcar títulos, listas, tabelas, taragrafos, códigos e muito mais de forma limpa e legível.

Ler mais

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar