时间戳

首页 > 解决方案 > 在 html 中刷新页面后，喜欢的值没有保存

javascript - 在 html 中刷新页面后，喜欢的值没有保存

问题描述

我创建了一个 html 和 css 网页，并添加了一个类似的按钮，代码是：

<html>
<head>
<script>
var Clicks = 0 ;
function AddClick(){
Clicks = Clicks + 1;
document.getElementById('CountedClicks').innerHTML = Clicks + 'Likes';
}
</script>
</head>

<body>
<span id="CountedClicks">0 Likes</span><br>
<button onclick="AddClick()"><i class="fas fa-thumbs-"></button>
</body>

</html>

当我刷新页面时，喜欢的价值会重置为零，你能帮我吗？

标签： javascripthtmlcss

解决方案

存储点击计数的一种方法是使用 localStorage。当您加载页面时，您检查 localStorage 是否有“点击次数”并使用它，否则 Clicks 设置为 0。每次调用 addClick 函数时，您都会将点击次数保存到 localStorage。但是，点击计数只会显示在您的浏览器中。如果其他人使用您的网站或您使用不同的浏览器，则点击计数是单独的。

<html>
<head>

</head>

<body>
  <span id="CountedClicks">0 Likes</span><br>
  <button onclick="AddClick()"><i class="fas fa-thumbs-">Like</button>

  <script>
    let Clicks = window.localStorage.getItem('Clicks')||0
    document.getElementById('CountedClicks').innerHTML = Clicks+' Likes'

    function AddClick(){
      Clicks++
      window.localStorage.setItem('Clicks',Clicks)
      document.getElementById('CountedClicks').innerHTML = Clicks + ' Likes';
    }
  </script>
</body>
</html>

推荐阅读