如何存储按钮被点击的次数？答案

【问题标题】：How to store number of times a button was clicked?如何存储按钮被点击的次数？
【发布时间】：2017-04-26 05:22:02
【问题描述】：

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

按钮被点击的次数，我的意思是这个按钮被点击了多少次。许多用户将访问此网页。我想要发生的累计点击次数。所以如果我今天访问网页并点击按钮，点击次数变为1，如果我明天做同样的事情，点击次数变为2

编辑：场景考虑情景。我有三个用户 A、B 和 C。假设在一周内，“A”每天访问该网站 3 次，并且总共点击了 4 次按钮。 B 只访问该网站一次并点击了 2 次。 C 访问它两次并单击按钮 1 次。所以到本周末我应该看到的总数是 7 (4 + 2 + 1)。我会在编辑中添加它。

【问题讨论】：

你试过什么？
我想在 S3 存储桶中保存一个 json 文件，但由于这成为服务器端的要求，我对如何使用 javascript 执行此操作感到困惑。看看这个：askyb.com/javascript/…
将您的点击保存在数据库中，将其保存在 json(frontend) 中可能是个坏主意
如果您能提供有关您的要求的更多信息，将会很有帮助。例如：除了计算它被点击的次数之外，你是否希望按钮做任何事情？应该显示信息还是应该将用户带到另一个网页？稍后您将如何使用该值——也就是说，应该在页面上显示计数，还是其他应用程序会以某种方式使用该值？为什么要将结果存储在文本文件中？这不如将其存储在数据库中那么有效。这些答案将帮助我们推荐合适的解决方案。
好吧，我不想在任何地方显示它。该按钮将具有其他功能。我已经照顾好了。我需要存储点击次数以查看该功能使用了多少次。简单来说，就是想看看这个功能被使用了多少次。也许六个月后我想看看这个功能被使用了多少次。我不想看到访问次数。一次访问可能会导致多次点击。我想存储这个数字，即。使用功能的总次数。文本文件只是我随机写的一些东西。

标签： javascript jquery html amazon-web-services amazon-s3

【解决方案1】：

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

相反，您需要能够触发一些服务器端代码，以增加计数而不提供任何额外功能。

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

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

DynamoDB pricing 在最慢的速度（可能足以满足您的需要）和每 GB / 月 25c 的情况下仅每小时约 0.5 美分。这不会花费太多。

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

Lambda 函数只是一个 Update expression 来增加值。

或者，又快又脏……

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

【讨论】：

考虑到我实现了一个 lambda 函数，它会是线程安全的吗？简单的同步函数就足够保证原子性了？
每个 lambda 函数独立运行。 DynamoDB 中的 ADD 操作不需要 READ 和 WRITE —— 它只需将值添加到存储的字段。

【解决方案2】：

坦率地说，您可能希望开始更智能地记录点击，方法是将其划分为时间段（例如小时、天），可能还可以按用户或人口统计数据，因此您最终可能会记录有关每次点击的更多详细信息，然后分别计算总数。

猜猜看……这就是所谓的网站分析！

您最好简单地实现一个像Google Analytics 这样的服务，它可以轻松地为您提供所有这些功能。

【讨论】：

【解决方案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

【讨论】：

谢谢，埃马德。不幸的是，这行不通。因为我需要所有用户的总点击次数。考虑情景。我有三个用户 A、B 和 C。假设在一周内，“A”每天访问该网站 3 次，并且总共点击了 4 次按钮。 B 只访问该网站一次并点击了 2 次。 C 访问它两次并单击按钮 1 次。所以到本周末我应该看到的总数是 7 (4 + 2 + 1)。我会在编辑中添加它。
这是最简单的答案：它确实帮助了我。 +1

【解决方案4】：

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

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

【讨论】：

这个根据用户的要求是不行的。