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!