如何在无PHP支持的NeoCities站点中实现跨用户与会话的变量追踪及按钮总点击次数统计

嘿，我之前在NeoCities折腾个人站点的时候，刚好碰到过一模一样的需求！想要统计所有用户的总点击量，localStorage或者sessionStorage肯定行不通——这些数据都存在用户自己的浏览器里，换个人打开就清零了，完全不是咱们要的跨用户统计。而且NeoCities默认只支持静态文件，PHP这类后端又用不了，那咱们得换个思路：用第三方无后端数据存储服务，靠前端JS直接和远程数据库交互来存计数。

下面给你说个实操性强的方案，我自己亲测能用：

第一步：选一个免费的无后端数据库服务 #

你可以选Firebase Realtime Database、Supabase这类支持前端直接读写的服务，它们都有免费额度，完全够个人小站点用。注册之后，创建一个简单的数据库节点（比如叫buttonClicks），记得把读写权限设置好——初期为了方便，可以先开匿名读写，后期再优化安全规则。

第二步：前端代码实现（拿Firebase举例子） #

首先你得从服务的控制台里复制对应的SDK配置和脚本，嵌入到你的HTML里，然后写JS逻辑：

1. 页面加载时，从远程数据库拉取当前的点击次数，更新按钮显示；
2. 按钮被点击时，把计数加1再写回数据库，同时自动同步显示内容。

具体代码大概是这样的：

<!-- 嵌入从数据库服务控制台复制的SDK脚本 -->
<script type="module">
  // 导入数据库服务的核心方法
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
  import { getDatabase, ref, onValue, increment, update } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";

  // 这里的配置是你从服务控制台拿到的专属配置
  const firebaseConfig = {
    apiKey: "你的项目API密钥",
    authDomain: "你的项目域名",
    databaseURL: "你的数据库地址",
    projectId: "你的项目ID",
    storageBucket: "你的存储桶名称",
    messagingSenderId: "发送者ID",
    appId: "你的APP ID"
  };

  // 初始化数据库连接
  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);
  // 指向我们存点击数的节点
  const clicksRef = ref(db, 'buttonClicks');

  // 页面加载时获取并显示当前点击数
  onValue(clicksRef, (snapshot) => {
    const currentCount = snapshot.val()?.count || 0;
    const clickBtn = document.getElementById('countBtn');
    clickBtn.textContent = `点击我（总点击量：${currentCount}次）`;
  });

  // 给按钮绑定点击事件
  document.getElementById('countBtn').addEventListener('click', () => {
    // 用原子操作increment来更新计数，避免多人同时点击导致的计数错误
    update(clicksRef, { count: increment(1) });
    // 不用手动更新显示，因为上面的onValue监听会自动同步最新数据
  });
</script>

<!-- 页面上的按钮 -->
<button id="countBtn">点击我（总点击量：0次）</button>

第三步：注意事项 #

• 安全问题：初期开匿名读写可能会被恶意刷点击，后期可以给数据库加规则，比如只允许匿名用户写入，或者限制每分钟的写入次数，具体规则可以在服务控制台里配置；
• 替代方案：如果你不想用大型服务，也可以用Google Sheets当简易数据库——写个Google Apps Script脚本处理读写请求，前端用fetch发送请求来更新和获取计数，不过这个得稍微折腾下脚本部署；
• NeoCities的限制：别想着在NeoCities上跑自己的后端代码，它是纯静态托管，所有动态逻辑都得靠第三方服务来撑。

我当初就是用这个方法搞定了我的站点点击统计，免费额度完全够，而且操作起来也没那么复杂～

内容来源于stack exchange