如何存储单击按钮的次数？

Question

我在亚马逊S3上托管了一个基本的网页。该页面用HTML、CSS和Javascript实现。我希望记录点击按钮的次数(显示在页面上)。此外，由于S3只支持静态web托管，并考虑到我的需求需要服务器端脚本，这个问题是否有效？我不需要一个花哨的解决方案，我只需要记录一个按钮被点击的次数，并将它存储在存储在桶中的一个简单的文本文件中。

按点击按钮的次数，，我的意思是这个按钮点击了多少次。这个网页将被许多用户访问。我想要一个累积的点击次数。因此，如果我今天访问该网页并单击该按钮，则单击次数为1，如果我明天进行相同的操作，则单击次数为2。

编辑:场景--考虑这个场景。我有三个用户A，B和C。假设一个星期，'A‘每天访问网站3次，总共点击4次。B只访问网站一次，点击2次。C访问它两次，并单击该按钮1次。所以这个周末我应该看到的总数是7 (4 +2+ 1)。我会把它添加到编辑中。

Answer 1

这不能完全在客户机(web浏览器)上完成，因为它需要“读取当前值”然后在某个地方“写入新值”的能力。这会打开安全漏洞，因为任何阅读Javascript的人都可以修改它的行为。

相反，您需要能够触发一些服务器端代码，这些代码将在不提供任何额外功能的情况下增加计数。

最简单的选择(取决于你的能力)可能是：

• 创建一个 DynamoDB表来存储计数
• 创建一个AWS函数，该函数在某些数据库中增加计数
• 使用调用Lambda函数的 API网关创建API

以最慢的速度(可能足以满足您的需要)和每个GB/月25c的速度，DynamoDB定价仅为每小时半美分。不会花多少钱的。

您可能适合于Lambda的免费使用层和API网关的(第一年)免费使用层。

Lambda函数将仅仅是一个更新表达式来增加值。

或者，快速而肮脏的.

如果这一切听起来太复杂，您可以直接从中更新DynamoDB (参见DynamoDB用于Javascript -作弊表中的示例)。缺点是您需要为代码提供一些安全凭据，但是您可以将它们限制为只能调用特定表上的Update函数。不太安全，但最糟糕的事情是将您的值更新为一些非常奇怪的数字(而服务器版本一次只允许一个增量)。

Answer 2

坦率地说，你可能想要开始变得更聪明的记录点击，通过将它划分为时间周期(如小时，一天)，并可能根据用户或人口统计学，所以你可能最终记录更多的细节，每次点击，然后计算总数分别。

猜怎么着..。这被称为网站分析！

您最好简单地实现一个像谷歌分析这样的服务，该服务只需花费很少的精力就可以提供所有这些功能。

Answer 3

正如您所提到的，您将需要服务器端语言来正确地完成此操作并将数据保存在数据库中，但是您仍然可以使用一些技巧来使用javascript来完成此操作，其中之一是将您的点击计数存储在本地存储中，所以至少在用户不删除存储数据之前，您的值是有效的！

我创建了一个简单的例子。

Javascript：

function countClicks(){
    console.log("Counting Start...");
    var counts = localStorage.getItem('click-counts');//You can use
    if (counts!==null){
        var newClick = parseInt(counts) + 1;
        localStorage.setItem('click-counts', newClick);
    }
    else{
        localStorage.setItem('click-counts', "1");
    }
   document.getElementById("showCounts").innerHTML = counts;
 }

HTML：

<button onclick="countClicks()" >
   Click!
</button>
<div>
  <p id="showCounts"></p>
</div>

你可以在这里试试：

https://jsfiddle.net/emilvr/35v60xt5/21/

更好的选择是使用一些第三方服务，如Firebase：

https://firebase.google.com/docs/database/web/start