如何实现统计所有用户对指定按钮的累计总点击次数？

核心前提 #

纯前端代码无法实现跨用户的累计点击统计：所有用户的浏览器运行环境相互隔离，localStorage、IndexedDB等前端存储都仅保存在用户本地设备，无法多端同步共享数据，必须配合后端服务存储全局统一的计数。

实现方案 #

1. 后端侧准备两个基础接口 #

• 计数查询接口：供页面加载时调用，返回当前累计的总点击量
• 点击上报接口：用户点击按钮时触发调用，后端将全局计数+1后返回最新数值

2. 前端代码修改示例 #

<!-- 新增点击数展示区域 -->
<p>总点击次数：<span id="totalCount">0</span></p>
<button onclick="myFunction()">Press Me</button>

<script>
// 页面加载时拉取最新的总点击数
window.addEventListener('load', async () => {
  const countRes = await fetch('/api/getTotalClicks')
  const totalCount = await countRes.json()
  document.querySelector('#totalCount').textContent = totalCount
})

async function myFunction(){
  // 点击后上报后端更新计数
  const updateRes = await fetch('/api/incrementClick', {
    method: 'POST'
  })
  const latestCount = await updateRes.json()
  document.querySelector('#totalCount').textContent = latestCount
}
</script>

轻量实现选项 #

如果不想搭建完整的后端服务，可以用Serverless云函数实现上述两个接口，仅需十几行代码即可完成部署，不用维护服务器资源。

内容的提问来源于stack exchange，提问作者Vincent Lindell