LocalStorage: Seu navegador como persistência de dados em Javascript

LocalStorage, o que é?

É fácil notar que, em suma, as aplicações costumam perder valores armazenados em suas variáveis a cada atualização da página (F5). O LocalStorage atua, como o próprio nome já diz, armazenando dados de forma local, sendo que estes dados permanecerão salvos na memória do navegador do usuário.

O mais legal disso tudo é que: se o usuário fechar/abrir o navegador, os dados persistirão salvos!

Além deste recursos, existem diversos outros que auxiliam você, desenvolvedor, a salvar dados no navegador: SessionStorage, IndexedDB e WebSQL são exemplos de recursos similares.
Porém, por ser uma nova implementação do HTML5, pela facilidade de uso e por possuir maior espaço de armazenamento, opto por passar estes conhecimentos para vocês!

A importância do LocalStorage:

Durante as etapas de iniciais do aprendizado de qualquer linguagem, muitas vezes atríbuimos pouca importância aos valores que as variáveis do código assumirão. De certa forma, nesta fase de aprendizado, ficar se questionando se um valor do tipo String tem conteudo "x" ou "y" só é importante caso o código quebre. Assim também acontece com alguns valores numéricos, costumeiramente inespecífcos e com caráter de teste.
Em contrapartida, quando nos aprofundamos no desenvolvimento de aplicações, percebemos a necessidade de armazenar valores genéricos e relevantes para a aplicação. É aqui que o LocalStorage entra...

Alguns exemplos de uso do LocalStorage:

• Exibir uma saudação de boas vindas, considerando um nome já informado em sessões anteriores do usuário.

• Apresentar produtos de destaque, baseando-se na faixa etária do usuário.

• Personalizar continuamente as cores de uma interface, com base na primeira seleção feita pelo usuário.

• Salvar dados de um carrinho de compras, o que pode ser interessante para o site de uma empresa.

Obs.:
(Abaixo eu vou exemplificar o último exemplo através de um jogo, além de demonstrar NA PRÁTICA uma vulnerabilidade crítica relacionada a este recurso)

Utilizando o LocalStorage

Antes de mais nada, é importante sanar alguns mitos:

1. Os dados salvos pertencem ao navegador e ao domínio que os armazenou: Se você utilizar a aplicação em um navegador X, quando abrí-lo novamente em um navegador Y as informações não serão recuperadas.

2. O LocalStorage pode ter seus dados "acidentalmente" removidos por simplesmente apagar o histórico de navegação do browser: Logo, não é recomendado o uso desta técnica em casos de maior robustez e/ou armazenamento de dados relevantes do usuário e do sistema com este recurso.

3. Os dados são armazenados com o tipo String: cuidado com a execução de cálculos com estes valores, sobretudo com operações de adição (+), já que a concatenação pode ser um empecilho neste sentido.

Dica 1: Verifique agora seu LocalStorage, pois até aqui na Tabnews temos o uso deste tipo de recurso!
Para fazer isto, basta seguir estes passos:

1. Aperte a tecla F12 (Caso esteja no Chrome, abrirá o DevTools).
2. Na guia Application, na coluna à esquerda, localize a droplist do Local Storage.
3. Drope a lista e verifique os dados existentes, eles são importantes para a execução de operações personalizadas do usuário no site (como título da publicação ou userID).
4. Pronto! Agora você conhece melhor o LocalStorage.

Dica 2: Salvando dados do LocalStorage utilizando o JS!
Os métodos do Local Storage pertencem a Web Storage API do HTML5, com funcionalidades similares às vistas no recurso "vizinho" Session Storage. Porém, como já foi dito, no caso do SessionStorage, os dados persistem apenas na sessão (enquanto não fechamos o navegador).

Para salvar um dado de forma persistente para a variável idade, por exemplo, basta seguir estes passos no console ou dentro do seu Script.js:

Método setItem (Recomendado):

localStorage.setItem("idade", 25)

ou com P.O.O.:

localStorage.idade = 25

ou ainda com notação de elementos de um vetor:

localStorage['idade'] = 25

Dica 3: Verificando dados do LocalStorage utilizando o JS!
A aquisição dos dados ocorre através do método getItem:

    localStorage.getItem("idade"); -> Retornando a String (lembra da treta da concatenação?)

Resolvendo o problema de retorno da String (O bom e velho casting)

    Number(localStorage.getItem("idade"));

Deste modo, para retornar o valor em um alerta do Javascript, por exemplo, podemos armazenar o valor em variável:

const idade = Number(localStorage.getItem("idade"));
alert(idade);

[BONUS]

A propósito, se liga nessa vulnerabilidade que eu encontrei na Web! (não é propaganda, é aprendizado)

No jogo de mineração "Gold Digger FRVR", utiliza-se muito (abusivamente?) dos recursos de armazenamento local. Dentro deste contexto, alocou-se na memória os dados referentes as "gemas" e "ouro" do herói.
Deste ponto de vista, podemos sim alterar os valores inerentes destes em benefício indevido ao jogador, quebrando toda a jornada de uso!

Como testar:

1. Abra o link do jogo: https://golddigger.frvr.com/
2. Acesse o LocalStorage (como na dica 1).
3. Procure na Storage pela chave: "golddiggergems"
4. Dentro do seu JSON {"gems":x"stars":y} altere os valores x e y.
5. Atualize a página e veja seus recursos mudarem!

Isso é tudo pessoal, obrigado por ler até aqui -

Espero ter conseguido colaborar com a comunidade, esclarescendo um pouco mais acerca deste conteúdo super importante do mundo da programação WEB, se restou alguma dúvida/sugestão/ adendo ficarei muito feliz em ler e acompanhar as discussões - Raphael Anaximenes