O localStorage é um dos mecanismos do Web Storage, API de armazenamento que permite aos desenvolvedores guardar informações nos navegadores. Existe um outro mecanismo que você pode utilizar desta API, chamado sessionStorage, que armazena as informações enquanto a sessão está aberta, ou seja, enquanto o navegador está aberto.

Com o uso do localStorage é possível armazenar informações no navegador, sendo possível regatá-las mesmo após o fechamento dele. Antes do HTML5, esse mesmo processo era feito com o uso dos cookies, mas o uso do localStorage é mais indicado. Geralmente são utilizados para guardar informações relevantes para a experiência do usuário dentro do site, e nunca para guardar informações pessoais sensíveis.

Para a manipulação deste mecanismo, iremos utilizar os seguintes métodos:

• localStorage.setItem() - para criar;
• localStorage.getItem() - para pegar;
• localStorage.removeItem() - para remover;
• localStorage.clear() - para remover todos os itens armazenados(TODOS);

Gravando um dado

Para gravar um dado com o uso do localStorage é muito simples. Basta utilizar a função abaixo:

localStorage.setItem(‘nome’, ‘Fulano’);

Onde ‘nome’ identifica o dado ‘Fulano’.

Nota: É importante ressaltar que no localStorage só podem ser armazenados dados do tipo String, então preste muita atenção quando for fazer o uso dele.

Pegando um dado

É possível recuperar um dado com o comando abaixo:

localStorage.getItem(‘nome’);

Onde ‘nome’ é o identificador que damos ao dado, ou seja, o nome dele.

Removendo um dado

Para remover um dado, basta usar o método abaixo, passando por parâmetro o nome dele, assim como no getItem():

localStorage.removeItem(‘nome’);

Nota: Neste exemplo, somente o dado ‘nome’ foi removido.

Removendo todos os registros do localStorage

Para isso, utilize a função abaixo:

localStorage.clear();

Conclusão

Como você pode perceber, é muito simples trabalhar com esta ferramenta. Ela nos permite criar, pegar e remover registros do nosso navegador de forma muito prática.

Pra você que quer saber um pouco mais sobre o assunto, deixei alguns links abaixo:

w3Scholls

MDN Web Docs

Tableless