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

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!

Chrome localStorage

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:

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.
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.
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:

Aperte a tecla F12 (Caso esteja no Chrome, abrirá o DevTools).
Na guia Application, na coluna à esquerda, localize a droplist do Local Storage.
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).
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:

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

Gold Digger FRVR

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

Anotar | Salvar | Recuperar | ...
DevRaphinhaAnx, usando a ideia que apresentou. A primeira ideia precisa de uma hospedagem estática, fazendo do navegador um bloco de notas temporário (até limparem o local storage ou um crash do navegador). A duas últimas ideias funcionam no Console do navegador.

Salvar anotações no storage (desde que não seja janela anônima);

<!-- [:) start:notes.htm (:] -->
<!-- Este código pode precisar de uma hospedagem local ou na nuvem. -->
<!-- É evidente que o conteúdo do storage sempre será local -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor de Texto</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        button {
            margin: 5px;
            padding: 10px;
        }
        .message {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Editor de Texto</h1>

    <textarea id="textInput" placeholder="Escreva algo aqui..."></textarea><br>
    <input type="text" id="fileName" placeholder="Caminho e nome do arquivo (opcional)"><br>

    <button id="saveToFile">Salvar Como Arquivo</button>
    <button id="store">Armazenar no Storage</button>
    <button id="showIds">Mostrar IDs Armazenados</button>
    <button id="clear">Limpar Textarea</button>

    <div class="message" id="message"></div>

    <h2>IDs armazenados:</h2>
    <ul id="idsList"></ul>

    <script>
        // Função para salvar conteúdo em um arquivo
        document.getElementById('saveToFile').addEventListener('click', function () {
            const text = document.getElementById('textInput').value;
            const fileName = document.getElementById('fileName').value || `texto_${Date.now()}.txt`;
            const blob = new Blob([text], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            showMessage(`Arquivo ${fileName} salvo com sucesso!`);
        });

        // Função para armazenar o texto no localStorage
        document.getElementById('store').addEventListener('click', function () {
            const text = document.getElementById('textInput').value;
            const id = Date.now().toString();
            localStorage.setItem(id, text);
            showMessage(`Texto armazenado com o ID: ${id}`);
        });

        // Função para mostrar os IDs armazenados
        document.getElementById('showIds').addEventListener('click', function () {
            const idsList = document.getElementById('idsList');
            idsList.innerHTML = '';
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                const li = document.createElement('li');
                li.textContent = key;
                idsList.appendChild(li);
            }
            if (localStorage.length === 0) {
                showMessage('Nenhum ID armazenado.');
            }
        });

        // Função para limpar o textarea
        document.getElementById('clear').addEventListener('click', function () {
            document.getElementById('textInput').value = '';
            showMessage('Textarea limpo.');
        });

        // Função para mostrar mensagens
        function showMessage(message) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = message;
            setTimeout(() => {
                messageDiv.textContent = '';
            }, 3000);
        }
    </script>
</body>
</html>
<!-- [:) end:notes.htm (:] -->

Salvar todos os pares id:valor em um JSON;

// Se entende e confia no que esse código faz copie e cole no console do navegador
// Exportar localStorage para JSON
function exportLocalStorage() {
    const localStorageData = {};
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        localStorageData[key] = value;
    }

    const jsonStr = JSON.stringify(localStorageData, null, 2);

    // Exibir o JSON no console
    console.log(jsonStr);

    // Perguntar se o usuário quer salvar o arquivo
    const shouldSave = confirm("Deseja salvar o localStorage como arquivo JSON?");

    if (shouldSave) {
        const timestamp = Date.now();
        const blob = new Blob([jsonStr], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `localStorage_${timestamp}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}

exportLocalStorage();

Recuperar de volta todos os pares id:valor de um JSON em arquivo para o local storage.

// Se entende e confia no que esse código faz copie e cole no console do navegador
// Importar JSON para o Local Storage
function importLocalStorage() {
    const fromFile = confirm("Deseja importar de um arquivo JSON?");
    
    if (fromFile) {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = ".json";
        input.onchange = e => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                const jsonData = event.target.result;
                populateLocalStorage(jsonData);
            };
            reader.readAsText(file);
        };
        input.click();
    } else {
        const jsonStr = prompt("Cole o conteúdo JSON aqui:");
        if (jsonStr) {
            populateLocalStorage(jsonStr);
        }
    }
}

function populateLocalStorage(jsonStr) {
    try {
        const data = JSON.parse(jsonStr);
        for (let key in data) {
            if (data.hasOwnProperty(key)) {
                localStorage.setItem(key, data[key]);
            }
        }
        console.log("localStorage populado com sucesso!");
    } catch (e) {
        console.error("Falha ao importar JSON:", e);
    }
}

importLocalStorage();

Agora só falta transformar estes dois últimos itens em um complemento para o navegador.