O armazenamento local é uma ferramenta útil de desenvolvimento web que permite aos desenvolvedores salvar dados no navegador do usuário. Neste artigo, veremos diferentes recursos de armazenamento local, começando com exemplos de nível iniciante e continuando com técnicas mais complexas. Ao final deste guia, você terá uma compreensão básica de como usar com sucesso o armazenamento local em aplicativos da web.

Exemplos de nível iniciante sobre armazenamento local

1. Armazenando preferências do usuário:

    Choose a theme:
    LightDarkMediumSave Preference

    

Quando o usuário seleciona um tema e clica no botão “Salvar preferência”, este código registra o tema no console. Para ler este log, abra as ferramentas de desenvolvedor do navegador (normalmente pressionando F12 ou clicando com o botão direito na página e selecionando “Inspecionar”) e vá para a guia console.(Leia mais)

2. Lembrando a entrada do usuário:

    Save Input

    

Este exemplo HTML gera uma página da web simples que permite aos usuários inserir texto em um campo de texto e salvá-lo no armazenamento local do navegador.

Quando um usuário digita texto na caixa de entrada e clica no botão “Salvar entrada”, o texto é salvo no armazenamento local do navegador. Isso implica que mesmo que os usuários atualizem o site ou fechem e reabram o navegador, a entrada salva permanecerá acessível. O log e o alerta do console notificam o usuário de que sua entrada foi salva com êxito. (Consulte Mais informação)

3. Persistência do carrinho de compras:

    
Shopping Cart
    

Este exemplo mostra como salvar um carrinho de compras usando armazenamento local. Os itens adicionados ao carrinho são salvos como uma matriz no armazenamento local na chave ‘carrinho’. Quando a página carrega, os itens salvos do carrinho são retirados do armazenamento local e mostrados.

Quando você clica em um dos botões “Adicionar item X ao carrinho”, o item apropriado é adicionado ao carrinho de compras e o conteúdo atualizado do carrinho é exibido no console. Para inspecionar esses logs, abra as ferramentas de desenvolvedor do navegador (normalmente pressionando F12 ou clicando com o botão direito na página e selecionando “Inspecionar”) e vá para a guia do console.

Você também pode visualizar o armazenamento local diretamente por meio das ferramentas de desenvolvedor do navegador. A maioria dos navegadores permite que você faça isso clicando com o botão direito na página, selecionando “Inspecionar” para obter as ferramentas do desenvolvedor e, em seguida, navegando até a guia “Aplicativo” ou “Armazenamento”. A partir daí, expanda a seção “Armazenamento local” para visualizar os pares de valores-chave do site. Neste exemplo, a chave “carrinho” inclui a string JSON que representa os itens salvos do carrinho.
Leia o artigo completo - Dominando o armazenamento local no desenvolvimento Web: 8 exemplos práticos, do iniciante ao especialista!

Aprenda Json – Clique aqui