如何开发统计所有用户点击的全局点击计数器，解决刷新计数重置问题

现有代码问题 #

• 计数变量存储在浏览器运行内存中，页面刷新/关闭就会重置
• 纯前端逻辑无法实现多用户数据同步，不同用户的计数互相独立，无法累加统计全局总点击
• 现有自增/自减逻辑顺序错误：value++是先返回当前值再自增，会导致点击后显示的是操作前的数值
• CSS全局样式存在语法错误：margin 0%缺少冒号，应该改为margin: 0%，否则样式不生效

方案1：单用户刷新不丢（仅本地生效，无法跨用户同步） #

如果只需要解决本地刷新不重置的问题，可以用浏览器localStorage持久化存储本地计数，修改app.js代码如下：

// 从localStorage读取初始值，没有就默认0
let value = Number(localStorage.getItem('counter')) || 0 
const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");
// 页面加载先渲染初始值
span.innerText = value

decreased.addEventListener("click" , () => {
    // 先自减再赋值
    span.innerText = --value;
    // 存到localStorage
    localStorage.setItem('counter', value)
});

increase.addEventListener("click" , () =>{
    span.innerText = ++value;
    localStorage.setItem('counter', value)
})

方案2：多用户全局同步计数（需要简单后端支持） #

要实现所有用户的点击全局累加、所有用户看到的数值一致，必须把计数存在公共的后端数据库里，最简实现逻辑如下：

后端逻辑（以Node.js+Express+Redis为例） #

const express = require('express')
const redis = require('redis')
const app = express()
const client = redis.createClient()
client.connect()
// 允许跨域访问
app.use(require('cors')())
// 查询当前全局计数
app.get('/count', async (req, res) => {
  const count = await client.get('global_counter') || 0
  res.send(count)
})
// 全局计数+1
app.post('/incr', async (req, res) => {
  const count = await client.incr('global_counter')
  res.send(String(count))
})
// 全局计数-1
app.post('/decr', async (req, res) => {
  const count = await client.decr('global_counter')
  res.send(String(count))
})
app.listen(3000, () => console.log('后端运行在3000端口'))

前端修改后的app.js代码 #

const span = document.querySelector("span");
const decreased = document.querySelector(".decreased")
const increase = document.querySelector(".increase");
// 替换成你部署的后端公网地址
const BACKEND_URL = 'http://localhost:3000'

// 页面加载先拉取最新全局计数
async function fetchCount() {
  const res = await fetch(`${BACKEND_URL}/count`)
  const count = await res.text()
  span.innerText = count
}
fetchCount()

decreased.addEventListener("click" , async () => {
  const res = await fetch(`${BACKEND_URL}/decr`, {method: 'POST'})
  const count = await res.text()
  span.innerText = count
});

increase.addEventListener("click" , async () =>{
  const res = await fetch(`${BACKEND_URL}/incr`, {method: 'POST'})
  const count = await res.text()
  span.innerText = count
})

后端部署到公网服务器后替换前端的后端地址，即可实现所有用户的计数同步累加。

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