Introdução ao LocalStorage em JavaScript

O localStorage é um recurso do navegador que permite armazenar dados de forma persistente no computador do usuário. É uma forma de armazenamento local que pode ser acessada e utilizada pelo JavaScript em páginas da web. Anteriormente os dados seriam armazenados via Cookies, mas hoje temos diversas opções.

Os dados do localStorage são armazenados no navegador da web do usuário. Especificamente, eles são armazenados no computador ou dispositivo em que o navegador está sendo executado. Cada navegador tem um local específico onde os dados do localStorage são mantidos, em outras palavras, quem gerencia todo o armazenamento é o navegador e nós só temos que nos preocupar com o Javascript.

Ao decorrer desse artigo você verá diversos exemplos de manipulação do LocalStorage, mas antes, você precisa saber como consultá-lo via navegador. Para isso, abra o inspetor do browser, navegue até a aplicação e por fim, clique em Local Storage.

Verificar se o browser suporta o Local Storage

É importante garantir que antes de usar qualquer recurso do Javascript, o navegador oferece suporte para ele. No código abaixo verificamos se o Storage está disponível, permitindo assim a utilização do LocalStorage.

if (typeof(Storage) !== "undefined") 
     console.log(Local Storage disponível)

Armazenando dados no Local Storage

Para armazenar dados, vamos utilizar a função setItem(), ela espera uma chave e valor, sendo:

• Chave/key: Um identificador único para o dado a ser armazenado;
• Valor/Value: A informação que você deseja armazenar.

localStorage.setItem(key, value)

Recuperando um item do localStorage

Para recuperar um item, utilizamos o método getItem(), que espera como parâmetro a chave referente ao item a ser retornado.

localStorage.getItem(key)

Remover um item específico do localStorage

Para remover um item específico, utilizaremos o método removeItem(), que espera como parâmetro a chave do item em questão.

localStorage.removeItem(key)

Retornar quantos itens existem no localStorage

Embora não seja tão utilizado, ainda podemos saber quantos itens foram armazenados no LocalStorage, para isso usaremos a propriedade length.

localStorage.length

Limpar todos os itens do localStorage

Muito útil quando concluímos uma compra ou fazemos o logout, é limpar todos os dados persistidos, para isso utilizaremos o método clear().

localStorage.clear()

Armazenando objeto em LocalStorage

Imagine que você teve um retorno de API, como um JWT e precisa guardar as informações no LocalStorage ou até mesmo, a preferência do usuário que será utilizado durante a sua navegação.

const contact = {
    name: 'SatellaSoft',
    site: 'https://satellasoft.com'
}

//Save
localStorage.setItem("contact", JSON.stringify(contact))

//Get
const contact = JSON.parse(storedContact)

Note que para armazenar o objeto, convertemos ele para JSON, assim uma string é gerada. Já para recuperar o objeto, convertemos a string JSON para objeto.

Para converter um objeto em JSON utilizamos a função:

JSON.stringify(object)

Já para converter um JSON em objeto utilizamos a função:

JSON.parse(“JSON_STRING”)

Dicas complementares

• Você pode utilizar LocalStorage quando os dados servirão apenas para o usuário;
• Não armazenar dados sensíveis, como dados do cliente, cartão de crédito, entre outros;
• Qualquer usuário pode acessar e manipular os dados diretamente no navegador;
• Não confie que a informação exista, sempre verifique se ela está disponível antes de apresentá-la.