Ainda sobre LocalStorage, mas na prática

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.