Sistema de Rating (avaliação) em HTML e JavaScript – Parte 2

Dando continuidade na aula anterior (clique aqui para ver a aula anterior) onde criamos a página HTML para um sistema de rating. Agora vamos incrementar um pouco mais este sistema.

 

Evitando que o usuário avalie duas vezes.

Temos que garantir que o usuário não avalie a mesma página duas vezes. Podemos resolver isso usando o localstorage do navegador que irá funcionar como um cache.

Dentro a função Avaliar() criada na aula anterior, acrescente no final da função a linha:

localStorage.setItem('avaliacao', avaliacao);

Agora, vamos criar uma nova função para checar se há algum valor guardado na localstorage. Se houver algum valor guardado significa então que já houve uma avaliação anterior e podemos redefinir as estrelas amarelas.

function VerificaAvaliacao()
{
 if (localStorage.getItem('avaliacao') != null)
 {
 Avaliar(localStorage.getItem('avaliacao'));
 }
}

Agora, edite o arquivo index.html e execute a função VerificaAvaliacao() no onload da página, ficando;

<body onload="VerificaAvaliacao()">

Prontinho! Agora quando o visitante retornar à página ele já terá as estrelas já preenchidas de acordo com a sua última avaliação, porém, poderá alterá-la novamente caso queira, o que torna este script ainda mais interessante.

E se o visitante limpar o navegador?

Caso isso ocorra, o visitante poderá avaliar novamente a mesma página, ou, caso ele use outro navegador ou entre em modo anônimo ele também poderá avaliar novamente a página.

Para resolver esta questão é necessário além de guardar a avaliação do usuário guardar também a sua identificação. Você poderá utilizar o login com o Facebook para guardar estes valores em um banco de dados. Veja a aula aqui.

Comparando os valores já gravados em um banco, poderemos então saber se o visitante identificado já possui uma avaliação registrada ou não.

 

O que vem a seguir?

Na terceira aula iremos guardar a avaliação em um banco de dados, tirar uma média delas e gerar um bloco schema.org. Não perca!

 

Download do exemplo

RatingJs2