如何为我的网页制作一个相似的按钮？

Question

我正在制作一个网页，我有不同的“图片”，我想要像按钮，当人们喜欢它，数字停留，然后他们只能喜欢每一张图片一次。我发现了一个我喜欢的代码，但是当我刷新页面时，所有喜欢的东西都消失了。我要他们留下。我不是最擅长解释或理解lol的人。

下面是我发现的我喜欢的代码，但是当我刷新时，我希望它能够正常工作。功能就像“投票”按钮。

​

/* 
 * 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

您实际上需要后端来解决这个问题，但这是一个快速的解决方案。

注意：代码不会在代码段中工作，但它经常工作。

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>

​

要查看本地存储，请转到DevTools打开应用程序选项卡，查看本地存储，您可以手动管理它。