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

Question

我已经在Amazon S3上托管了一个基本网页。 该页面以HTML，CSS和Javascript实现。 我希望记录单击按钮（显示在页面上）的次数。 另外，由于S3仅支持静态虚拟主机，并且考虑到我的需求需要服务器端脚本编写，所以这个问题甚至有效吗？ 我不需要花哨的解决方案，我只需要记录按钮被单击的次数并将其存储在存储桶中的一些简单文本文件中即可。

按按钮被单击的次数 ，我的意思是该按钮被单击了多少次。 许多用户将访问此网页。 我想要累积的点击次数。 因此，如果我今天访问网页并单击按钮，则点击数变为1，如果我明天也这样做，则点击数变为2

编辑：方案考虑方案。 我有三个用户A，B和C。假设一个星期，“ A”每天访问该网站3次，然后总共单击4次按钮。 B仅访问该网站一次，然后单击2次。 C两次访问它并单击按钮1次。 因此，到本周末我应该看到的总数是7（4 + 2 + 1）。 会在编辑中添加它。

Answer 1

这不能完全在客户端（Web浏览器）上完成，因为它将需要具有“读取当前值”然后“写入新值”的功能。 这会打开安全漏洞，因为任何阅读Javascript的人都可以修改其行为。

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

最简单的选择（取决于您的能力）可能是：

• 创建一个Amazon DynamoDB表来存储计数
• 创建一个AWS Lambda函数以增加某些数据库中的计数
• 使用调用Lambda函数的AWS API Gateway创建API

DynamoDB的最低速度（可能足以满足您的需求）的价格仅为每小时0.5美分，每GB每月25c。 这不会花费太多。

您可能适合Lambda的免费使用层和API Gateway的（第一年）免费层。

Lambda函数将仅仅是一个Update表达式以增加该值。

或者，又快又脏...

如果所有这些听起来都太复杂了，您可以直接从JavaScript直接更新DynamoDB （请参阅DynamoDB for Javascript –速查表示例）。 缺点是您需要为代码提供一些安全凭证，但是您可以将它们限制为只能在特定表上调用Update函数。 不那么安全，但是他们能做的最坏的事情是将您的值更新为一些非常奇怪的数字（而服务器版本一次只能允许一个增量）。

Answer 2

坦白说，您可能希望通过将其划分为时间段（例如，小时，天）并可能按用户或人口统计信息来变得更加智能，从而记录点击次数，因此您可能最终记录了有关每次点击的更多详细信息，然后分别计算总计。

猜猜是什么...这就是所谓的网站分析！

您可以简单地实现像Google Analytics（分析）这样的服务，而无需花费很多精力就可以提供所有这些功能，这可能会更好。

Answer 3

您必须使用客户端代码来检查单击按钮的时间，并将此值存储到数据库中以备将来使用：

 /*------------// By Using JQuery //---- $(function() { var i = 0; $('button').click(function() { i++; $("#count").val(i); // run ajax to save this value dynamically into database }); }); --------------------------------*/ // By using javascript var i = 0; function countClick() { i++; //alert('here'); document.getElementById("count").value = i ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <button onClick="countClick()">Click Me</button><br> Total Count<input type="text" id="count" disabled > 

Answer 4

好的，正如您提到的，您将需要一种服务器端语言来正确执行此操作并将数据保存在数据库中，但是仍然可以使用一些技巧仅使用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