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.
1 Resposta
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.
-
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
localStorage
?