WebStorage – Armazenando dados com JavaScript

1. Encontre seu código
›
2. JavaScript
›
3. WebStorage – Armazenando dados com JavaScript

---

No JavaScript, podemos armazenar valores de forma permanente ou temporária.

No início do aprendizado de JavaScript, muitas pessoas se perguntam, “Como posso armazenar um dado em JavaScript?” e é disso que iremos falar.

O JavaScript é uma linguagem nativa nos navegadores, ou seja, já faz parte de um navegador (browser), portanto, se você quer usar a internet, precisa usar um navegador.

Com isso, temos as WebStorages, que são armazenamentos de informações nos navegadores através do Javascript.

Aprenda vendo um vídeo:

Armazenamento nos browsers

Os Browsers (navegadores), possuem os seguintes armazenamentos:

• Cookies em JavaScript
• Armazenamento local (Local Storage)
• Sessões (Session Storage)

O Armazenamento local (Local Storage) em JavaScript

O Armazenamento local é uma das melhores maneiras de se armazenar dados com aplicações JavaScript. Imagine que você possui um web-site / web app e deseja que as informações digitadas no formulário permaneçam nele mesmo quando o browser é fechado, ou então, quando você quer armazenar quais artigos ou páginas seu usuário visitou para exibir algum anúncio ou promoção. Esse é o objetivo das WebStorages.

As Local Storages, são como o seu próprio nome diz, armazenamentos locais, ou seja, elas a armazenam qualquer informação no navegador, com isso, um dado armazenado no Firefox não será lido pelo Chorme ou Opera.

Formato das LocalStorages

As LocalStorages funcionam com o seguinte formado:

“propriedade”,”valor”.

Como criar uma Local Storage

Para se criar uma Local Storage, devemos utilizar o comando universal localStorage.

Devemos utilizar localStorage.setItem("propriedade","valor") para criarmos um novo valor armazenado, onde:

• Propriedade é o nome que você preferir, iremos referenciar nosso valor através da propriedade.
• Valor é o valor que essa propriedade terá, sendo o que você precisar.

Se desejamos armazenar uma idade, abra o console do navegador e digite:

localStorage.setItem("idade","43");

Vendo nossos localStorages no navegador

Para saber onde seus localStorages estão sendo armazenados, abra o console do navegador (Botão direito e inspecionar ou opções e ferramentas do desenvolvedor).
Clique em aplicativo e localStorage:

Você pode alterar esses valores clicando duas vezes na propriedade / valor e alterando eles. Isso é possível por que é o nosso navegador que armazena esses dados, portanto, podemos editá-los, mas lembre-se, alterando eles diretamente no navegador, o valor muda quando consultar pela linha de comando.

Atualizando uma LocalStorage

Para atualizar uma LocalStorage, devemos repetir os passos da criação dela, ou seja:

localStorage.setItem("idade","466");

ou

localStorage.idade = "466";

Isso irá mudar o valor da propriedade:

Não é possível alterar a propriedade, portanto, se você deseja mudar a propriedade, você precisa apagar a atual e criar uma nova.

Deletando LocalStorage

Para deletar uma localStorage, basta utilizar o comando:

localStorage.removeItem('idade');

Isso remove uma localStorage, digite o comando e entre os parênteses coloque o nome da propriedade.

Não há problema caso o nome passado seja errado, pois, o seu código não irá quebrar, o navegador busca a propriedade, caso ela exista, ele apaga, caso não, ele não faz nada.

Você também pode utilizar uma sintaxe menos verbosa:

delete localStorage.idade;

A maneira acima, o comando delete já é nativo no JavaScript para se deletar dados em um array e outros tipos.

Agora que já vimos como criar, atualizar ou deletar uma LocalStorage, como podemos ler ela?

Lendo uma localStorage

Para ler uma localStorage, podemos digitar:

localStorage.getItem('idade');

Caso você tenha apagado a propriedade “idade” você receberá um valor “null”, ou seja, que não existe essa propriedade.

Você também pode digitar apenas:

localStorage

E você receberá um array com todas as informações armazenadas no seu navegador:

Para ler essas localStorage, basta fazermos um loop nessa função Loop em JavaScript, com o for ou forEach.

Deletando todos dados Local Storage

Para deletar todo localStorage, basta rodar:

localStorage.clear();

Mas cuidado ao utilizar esse comando. Use apenas quando você for o responsável por todas propriedades armazenadas.

Mais sobre o LocalStorage

O LocalStorage sempre armazenará as informações como string, ou seja, texto, logo, se você armazenar um valor booleano (true / false), números ou objetos JSON, você precisará converter esses dados para trabalhar com eles.

Exemplo, como vimos, temos uma propriedade chamada WP_DATA_USER_1 que armazena um JSON, logo, precisamos converter essa string para um formato em JSON:

JSON.parse(localStorage.getItem('WP_DATA_USER_1'))

JSON.parse é um objeto que possui uma função chamada parse para converter strings em JSON (desde que a string estejam com o formato correto JSON).

Para armazenar um JSON na localStorage, devemos serializar o JSON antes, exemplo:

const json = {"idade":34};
localStorage.setItem('idade_json',JSON.stringify(json));

Assim, armazenamos um JSON na LocalStorage.

Por que devemos converter um JSON em string para armazenar no localStorage?

Por que assim evitamos possíveis problemas na hora de resgatá-lo do nosso localStorage. Um Json terá quebras de linhas, logo, a função stringify resolve todos problemas.

LocalStorage em outras aplicações

No mobile / ElectronJS também utilizamos as localStorage. Nesse caso