1
Recently in a project, the need arose to create a system that can be evaluated by the user, and in this case, only the "favorite" was requested. The user will just click on the "heart" and will be added +1 each click. But without the use of plugin and tals, only in Jquery, HTML and CSS.
2
You can use the Web Storage API since the only requirement is to keep this information when reloading the page, through the functions window#localStorage() and window#sessionStorage() it is possible to persist the data. In addition to the above two links, in that question has the explanation of the difference between them.
I set an example but could not post here, Sopt does not leave because of security. So I created a Fiddle to view and test online. Click the button Favourites sometimes and refresh the page.
<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();
Remembering that this data gets saved locally, if there is need to recover the value to send to the server you can call getFavoritesCount() and get the total of Favorites.
And a final remark, this feature has not been implemented in Opera Mini as can be seen at this link.
Thank you very much for sharing this, it worked perfectly, the only thing that did not turn out as wanted was the question of the vote being independent, that is, a value for each post, in this example, works yes, but the same number of the vote applies to the others.
Browser other questions tagged javascript jquery html css
You are not signed in. Login or sign up in order to post.
You want to save that score on the server?
– Sergio
What have you tried? What is your problem specifically?
– Vinícius Gobbo A. de Oliveira
Not necessarily, just don’t miss the score when reloading the page.
– David Silva
I used a simple counter in Jquery, but the value is lost when reloading the page.
– David Silva
Could be done with
localStorage?– Samir Braga
No, because the access tbm is done by the site.
– David Silva
I agree with @Renan.
– Samir Braga
Vlw guys, I’m gonna search here!
– David Silva