如何实现动态页面访问量递增计数 解决localStorage部署失效问题

• 方案逻辑偏差：localStorage是浏览器本地单机存储，数据存在每个访客自己的设备上，不同访客的计数完全独立，无法实现全网站统一累加的真实PV统计效果。
• 代码逻辑缺失：你仅定义了anamtharaPageload函数，没有绑定页面加载触发规则，页面打开时函数根本不会自动执行。
• 部署后常见触发失效的具体原因：
  • 页面中不存在id="demo"的DOM元素，JS获取元素时返回null，后续逻辑直接报错中断
  • JS代码放置位置在demo元素之前，DOM未渲染完成就执行获取元素的逻辑，直接报错
  • 线上站点配置了严格内容安全策略、或访客浏览器禁用了本地存储权限，localStorage读写被拦截
  • FileZilla上传时文件传输模式错误，JS文件被损坏，代码无法正常解析

场景1：仅需要统计单个用户本地打开页面的次数 #

直接使用修复后的前端代码即可，不需要后端支持，兼容大部分异常场景：

document.addEventListener('DOMContentLoaded', () => {
  const countContainer = document.getElementById('demo')
  if (!countContainer) return

  let visitCount = 0
  // 兼容本地存储被禁用的异常
  try {
    visitCount = Number(localStorage.getItem('localVisitCount')) || 0
  } catch (err) {}

  countContainer.textContent = ` ${visitCount}`
  
  try {
    localStorage.setItem('localVisitCount', visitCount + 1)
  } catch (err) {}
})

把这段代码替换掉你原来的函数即可，不需要额外手动调用，页面DOM加载完成后会自动执行，也不会因为元素不存在、存储被禁用导致页面报错。

场景2：需要全网站统一累加的真实浏览量计数 #

这种场景不能用纯前端localStorage实现，必须搭配后端逻辑：

• 后端服务维护一个全局计数，可存在数据库、站点配置文件中
• 前端页面加载时向后端计数接口发起请求
• 后端收到请求后将计数+1（可额外配置同IP短时间重复访问不计数的防刷规则），再把最新的计数值返回给前端
• 前端拿到返回的计数值后，渲染到id="demo"的元素中即可

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