Add bookmark system

Asked

Viewed 677 times

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.

javascript jquery html css

  • You want to save that score on the server?

  • What have you tried? What is your problem specifically?

  • Not necessarily, just don’t miss the score when reloading the page.

  • I used a simple counter in Jquery, but the value is lost when reloading the page.

  • 1

    Could be done with localStorage?

  • No, because the access tbm is done by the site.

  • I agree with @Renan.

  • Vlw guys, I’m gonna search here!

Show 3 more comments

1 answer

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.