How to make a like button for my webpage?

Question

i'm making a webpage where I have different "pictures" that I want like buttons on and when people like it, the number stays and then they can only like each image once. I found a code that I liked however when I refresh the page, all the likes go away. I want them to stay. I'm not the best at explaining or understanding lol.

Here's the code that I found that I liked, but I want to function as it goes away when I refresh. Function like a "vote" button.

/* 
 * Love button for Design it & Code it
 * http://designitcodeit.com/i/9
 */
$('.btn-counter').on('click', function(event, count) {
  event.preventDefault();
  
  var $this = $(this),
      count = $this.attr('data-count'),
      active = $this.hasClass('active'),
      multiple = $this.hasClass('multiple-count');
  
  // First method, allows to add custom function
  // Use when you want to do an ajax request
  /* if (multiple) {
  $this.attr('data-count', ++count);
  // Your code here
  } else {
  $this.attr('data-count', active ? --count : ++count).toggleClass('active');
  // Your code here
  } */
  
  // Second method, use when ... I dunno when but it looks cool and that's why it is here
  $.fn.noop = $.noop;
  $this.attr('data-count', ! active || multiple ? ++count : --count  )[multiple ? 'noop' : 'toggleClass']('active');
  
});

html {
  background: #f5f5f5;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  margin: 30px auto 0 auto;
  width: 450px;
  font-size: 75%;
}

h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #555;
}

p { padding-left: 10px; }


/*
 * Basic button style
 */
.btn {
  box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
  border-radius: 3px;
  border: 1px solid;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  position: relative;

  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
 * Counter button style
 */
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
  border-radius: 3px;
  border: 1px solid #d3d3d3;
  background-color: #eee;
  padding: 0 8px;
  color: #777;
  content: attr(data-count);
  left: 100%;
  margin-left: 8px;
  margin-right: -13px;
  position: absolute;
  top: -1px;
}
.btn-counter:before {
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');

  background-color: #eee;
  border: 1px solid #d3d3d3;
  border-right: 0;
  border-top: 0;
  content: '';
  position: absolute;
  right: -13px;
  top: 5px;
  height: 6px;
  width: 6px;
  z-index: 1;
  zoom: 1;
}
/*
 * Custom styles
 */
.btn {
  background-color: #dbdbdb;
  border-color: #bbb;
  color: #666;
}
.btn:hover,
.btn.active {
  text-shadow: 0 1px 0 #b12f27;
  background-color: #f64136;
  border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
  color: #b12f27;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

<h3>Basic button</h3>
<p>
  <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter - active/inactive</h3>
<p>
  <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter for people who likes to  click</h3>
<p>
  <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

Answer 1

You actually need back-end for this, but this is a quick solution.

NOTE: the code will not work in the snippet but it regularly works

W3: Window localStorage
Mozilla Window.localStorage

let btn = document.querySelector('#like');
let result = document.querySelector('#result');

localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');

btn.addEventListener('click', addLike());

function addLike(){
  localStorage.setItem('likes',  parseInt(localStorage.getItem('likes')) + 1);
  result.innerHTML = localStorage.getItem('likes');
}

<button id="like">LIKE</button>
<p id="result"></p>

to see the local storage, go to DevTools open application tab, see the local storage there and you can manage it manually