Ainda sobre LocalStorage, mas na prática
- #JavaScript
Então...
Neste artigo, que falo da utilização da LocalStorage e, inclusive, comandos para fazer um crud utilizando esse pequeno espaço reservado no navegador (está tudo lá no artigo), cometi a gafe de não postar o link da minha prática, que inclusive faz parte do meu repositório no github.
A página de prática está aqui
Para entender melhor do que se trata o trabalho prático, segue abaixo o estudo de caso.
Cadastro e Listagem de Produtos na LocalStorage
Objetivo:
Implementar um sistema de cadastro e listagem de produtos que permita ao usuário inserir novos produtos e visualizar uma lista ordenada dos produtos cadastrados, e possibilidade excluí-los.
Requisitos:
a) Cadastro de Produto:
- Formulário com campos para nome, descrição, valor e disponibilidade para venda.
- Ao cadastrar um produto, redirecionar automaticamente para a listagem.
b) Listagem de Produtos:
- Colunas: nome e valor.
- Ordenação dos produtos por valor, do menor para o maior.
- Botão na listagem para cadastrar um novo produto.
- Botão de exclusão do produto.
Descrição do Caso de Uso:
a) Cadastrar Produto:
- O usuário preenche um formulário com o nome e valor do produto e envia o formulário.
- O sistema armazena o produto no localStorage.
b) Listar Produtos:
- O sistema exibe todos os produtos armazenados no localStorage, ordenados pelo valor.
- O sistema mostra coloração no produto indisponível.
- O sistema mostra um popup com a descrição e disponibilidade ao passar o mouse sobre o produto.
c) Excluir Produto:
- O usuário clica no botão "Excluir" ao lado de um produto na listagem.
- O sistema remove o produto do LocalStorage e atualiza a listagem.