O que é o LocalStorage e o SessionStorage.🌴 TRILHA JavaScript 🚀 Etapa 13

Academy Code Christ 0

  Seja muito bem-vindo à Academy Code Christ!


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🚀 Etapa 13 

 

🧠 O que é o LocalStorage e o SessionStorage


O LocalStorage e o SessionStorage pertencem à API Web Storage, uma tecnologia padrão dos navegadores modernos.

Eles permitem que você armazene dados no navegador do usuário, sem precisar de banco de dados ou servidor.

Tipo

Duração

Acesso

localStorage

Permanente (até ser apagado manualmente)

Disponível em todas as abas e sessões do mesmo domínio

sessionStorage

Temporário (dura até fechar a aba)

Válido apenas para a aba atual

💬 Ambos armazenam pares de chave e valor (key/value), e tudo é guardado em formato de texto (string).


⚙️ Métodos Principais

Método

Função

.setItem(chave, valor)

Armazena um dado

.getItem(chave)

Recupera um dado

.removeItem(chave)

Remove um dado

.clear()

Limpa tudo

.key(indice)

Retorna o nome da chave em uma posição específica

💡 Exemplo Básico — Salvando Dados

<script>

// Guardar um dado

localStorage.setItem("nome", "Carlos");

 

// Recuperar o dado

let usuario = localStorage.getItem("nome");

console.log(usuario); // Carlos

</script>

 

🎯 Observe:
 Os valores são sempre armazenados como string. Se você tentar armazenar um número, ele é convertido automaticamente.


🧮 Removendo e Limpando Dados

<script>

localStorage.removeItem("nome"); // remove só o item "nome"

localStorage.clear(); // apaga tudo salvo no LocalStorage

</script>

 

💬 Use clear() com cuidado — ele apaga todas as chaves guardadas no domínio.


🔐 Diferença entre LocalStorage e SessionStorage

<script>

localStorage.setItem("usuario", "Ana");

sessionStorage.setItem("usuario", "Marcos");

 

console.log(localStorage.getItem("usuario")); // Ana

console.log(sessionStorage.getItem("usuario")); // Marcos

</script>

 

💡 localStorage persiste mesmo depois de fechar o navegador,
 enquanto sessionStorage desaparece assim que a aba é fechada.


🧩 Armazenando Objetos e Listas (Arrays)

Como o LocalStorage só aceita strings, precisamos converter listas e objetos com JSON.

Guardar e ler objetos:

<script>

const pessoa = { nome: "Julia", idade: 30 };

 

// Converte o objeto em texto JSON

localStorage.setItem("pessoa", JSON.stringify(pessoa));

 

// Recupera e converte de volta em objeto

const obj = JSON.parse(localStorage.getItem("pessoa"));

console.log(obj.nome); // Julia

</script>

 

💬 JSON.stringify() transforma objeto → texto
 JSON.parse() transforma texto → objeto


🧠 Exemplo Prático — Lembrar o Nome do Usuário

Vamos criar uma pequena interface que lembra o nome digitado, mesmo após fechar a página.

<h2 id="saudacao">Olá!</h2>

<input id="nome" placeholder="Digite seu nome">

<button id="salvar">Salvar Nome</button>

 

<script>

const entrada = document.getElementById("nome");

const saudacao = document.getElementById("saudacao");

const botao = document.getElementById("salvar");

 

// Verifica se já existe um nome salvo

let nomeSalvo = localStorage.getItem("nome");

if (nomeSalvo) {

  saudacao.textContent = `Bem-vindo de volta, ${nomeSalvo}!`;

}

 

// Salva novo nome

botao.addEventListener("click", () => {

  let nomeDigitado = entrada.value.trim();

  if (nomeDigitado !== "") {

    localStorage.setItem("nome", nomeDigitado);

    saudacao.textContent = `Bem-vindo, ${nomeDigitado}!`;

    entrada.value = "";

  }

});

</script>

 

✅ Mesmo que o usuário feche e abra a página, o nome continuará salvo!


🧮 Exemplo — Lista de Tarefas com LocalStorage

<h2>Lista de Tarefas</h2>

<input id="tarefa" placeholder="Digite uma tarefa">

<button id="add">Adicionar</button>

<ul id="lista"></ul>

 

<script>

const input = document.getElementById("tarefa");

const lista = document.getElementById("lista");

const botao = document.getElementById("add");

 

let tarefas = JSON.parse(localStorage.getItem("tarefas")) || [];

 

function atualizarLista() {

  lista.innerHTML = "";

  tarefas.forEach((tarefa, i) => {

    const li = document.createElement("li");

    li.textContent = tarefa;

   

    const btn = document.createElement("button");

    btn.textContent = "X";

    btn.onclick = () => {

      tarefas.splice(i, 1);

      salvar();

    };

   

    li.appendChild(btn);

    lista.appendChild(li);

  });

}

 

function salvar() {

  localStorage.setItem("tarefas", JSON.stringify(tarefas));

  atualizarLista();

}

 

botao.addEventListener("click", () => {

  let texto = input.value.trim();

  if (texto !== "") {

    tarefas.push(texto);

    salvar();

    input.value = "";

  }

});

 

// Inicializa lista ao carregar

atualizarLista();

</script>

 

💬 Agora, as tarefas continuam salvas após recarregar a página!

Você acabou de criar uma miniaplicação persistente.


🧩 Visualizando o LocalStorage

Você pode inspecionar o conteúdo salvo:

🔍 Vá em:
 ➡️ Navegador (Chrome, Edge, Firefox)
 ➡️ F12 ➜ Application (ou Armazenamento) ➜ Local Storage

Lá você verá as chaves, valores e tamanhos armazenados.


⚙️ Validando Dados Antes de Salvar

Para evitar bagunça no armazenamento, sempre valide o que o usuário insere.

if (nome.trim() === "") {

  alert("Digite um nome válido!");

  return;

}

 

📦 E lembre: localStorage tem limite de tamanho (~5 MB por domínio),
 então guarde somente o necessário.


🧠 Limpando Dados Condicionalmente

Você pode criar botões de “limpar dados” específicos.

<button id="limpar">Limpar Nome</button>

<script>

document.getElementById("limpar").addEventListener("click", () => {

  localStorage.removeItem("nome");

  alert("Nome apagado!");

});

</script>

 

💡 Útil para resetar configurações personalizadas do usuário.


🔒 Segurança e Boas Práticas

⚠️ Evite armazenar informações sensíveis (senhas, documentos, cartões, etc.).
 Use o LocalStorage apenas para:

●     Preferências visuais (tema, idioma, cores);

●     Configurações de usuário;

●     Dados de formulários ou listas simples.

💬 Para dados mais críticos, use banco de dados no servidor ou armazenamento seguro (como IndexedDB ou criptografia).


🧩 SessionStorage em Ação

Quer guardar informações só enquanto o usuário está com a aba aberta?

<script>

sessionStorage.setItem("usuario", "Visitante");

 

window.addEventListener("beforeunload", () => {

  console.log("Fechando a aba!");

});

</script>

 

💬 Ideal para sessões temporárias, como controle de formulários, carrinhos ou informações enquanto o usuário navega.


🧮 Exercício Prático

Crie uma página de preferências do usuário:

●     O usuário escolhe uma cor de fundo (input color);

●     Ao clicar em “Salvar Preferência”, a cor fica gravada;

●     Mesmo ao fechar o navegador, o tema permanece.

💬 Dica:

document.body.style.backgroundColor = localStorage.getItem("cor") || "#ffffff";

 


🎓 Revisão da Aula

Hoje você aprendeu:

✔ O que são LocalStorage e SessionStorage;
 ✔ Como salvar, recuperar e apagar dados;
 ✔ Como armazenar objetos e listas com JSON;
 ✔ Como criar aplicativos persistentes;
 ✔ E as boas práticas de uso seguro desses recursos.


✨ Conclusão

Agora suas páginas estão inteligentes e persistentes — elas lembram o que o usuário fez mesmo após o fechamento.

Você deu um passo essencial rumo à criação de aplicações completas no navegador, como gerenciadores de tarefas, sistemas de login e painéis personalizados.



📚 Continue aprendendo JavaScript:





🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição

🚀 Etapa 07 👉 Funções

🚀 Etapa 08 👉 Eventos

🚀 Etapa 09 👉 O DOM




🚀 Etapa 13 👉 Você está nessa Etapa




Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 


Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem