1

Recentemente em um projeto, surgiu a necessidade da criação de um sistema que pode-se ser avaliado pelo usuário, e neste caso, foi solicitado somente o "favorito". O usuário apenas irá clicar sobre o "coração" e será somado +1 a cada clique. Porém sem a utilização de plugin e tals, apenas em Jquery, HTML e CSS.

8
  • Queres guardar essa pontuação no servidor?
    – Sergio
    Commented 24/12/2015 às 17:06
  • O que você tentou? Qual o seu problema especificamente? Commented 24/12/2015 às 17:09
  • Não necessariamente, apenas que não perca a pontuação ao recarregar a página. Commented 24/12/2015 às 17:10
  • Utilizei um contador simples em Jquery, porém o valor é perdido ao recarregar a página. Commented 24/12/2015 às 17:11
  • 1
    Poderia ser feito com localStorage? Commented 24/12/2015 às 17:12

1 Resposta 1

2

Você pode usar a Web Storage API visto que o único requisito é manter estas informações ao recarregar a página, por meio das funções window#localStorage() e window#sessionStorage() é possível persistir os dados. Além dos dois links acima, nessa pergunta tem a explicação da diferença entre elas.

Eu montei um exemplo mas não consegui postar aqui, o SOpt não deixa por conta da segurança. Então criei um Fiddle para visualizar e testar online. Clique no botão Favoritos algumas vezes e atualize a página.

<a href='#' id='count'>Incrementar contagem</a> <!-- botão -->

<p>Total: 
   <span class='badge'></span>                  <!-- total de favoritos -->
</p>       
/*** 
 * Chave usada para armazenar e recuperar as informações salvas
 * no mapa do localStorage.
 */
var FAVORITES_KEY = 'fav';

/** Altera o texto da 'badge' com o total de Favoritos. */
function updateBadge(){
  $('.badge').text(getFavoritesCount());
}

/** Obtém o total de favoritos. */
function getFavoritesCount() {
  var count = localStorage.getItem(FAVORITES_KEY);
  return !count ? '0' : count;
}

/** Adiciona '1' ao total de favoritos. */
function incrementFavorites(){
  var count = parseInt(getFavoritesCount()) + 1;
  localStorage.setItem(FAVORITES_KEY, count);
}

// Quando '#count' for pressionado, é incrementado '1' ao total de
// Favoritos e atualizado a contagem em '.badge'.
$('#count').on('click', function(){
  incrementFavorites();
  updateBadge();
});

// É feita uma primeira chamada para exibir o '0' quando
// ainda não existir nenhum valor em 'FAVORITES_KEY'.
updateBadge();

Lembrando que estes dados ficam salvos localmente, se houver necessidade de recuperar o valor para enviar para o servidor você pode chamar getFavoritesCount() e obter o total de Favoritos.

E uma observação final, este recurso não foi implementado no Opera Mini como pode ser visto neste link.

1
  • Muito obrigado por compartilhar isso, funcionou perfeitamente, a única coisa que não ficou como desejava era a questão da votação ser independente, ou seja, um valor para cada post, neste seu exemplo, funciona sim, porém o mesmo número da votação se aplica para os demais. Commented 29/12/2015 às 4:11

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .