如何将GitHub Pages页面中的int变量值持久化到免费服务端/数据库？

作为新手，你需要一个能存储全局计数的免费服务，同时不需要复杂的后端开发，以下是几个易上手的方案：

方案一：Firebase Realtime Database（最适合新手） #

Firebase的实时数据库提供免费额度，足够小项目使用，且支持前端直接调用SDK操作数据：

• 注册Firebase账号，创建新项目后启用「Realtime Database」，初始可以设置宽松的读写规则（后续再优化安全限制）
• 在你的HTML中引入Firebase SDK，初始化项目（配置信息在Firebase控制台获取）
• 修改按钮逻辑：点击时通过原子操作更新数据库中的计数，同时监听数据库变化自动更新页面显示

示例代码：

<!-- 引入Firebase核心及数据库SDK -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

<p id="count-display">0</p>
<button id="increment-btn">点击+1</button>

<script>
  // 替换为你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    databaseURL: "你的DATABASE_URL",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的SENDER_ID",
    appId: "你的APP_ID"
  };

  // 初始化Firebase
  firebase.initializeApp(firebaseConfig);
  const countRef = firebase.database().ref('global_count');

  // 页面加载时获取最新计数
  countRef.on('value', snapshot => {
    const currentCount = snapshot.val() || 0;
    document.getElementById('count-display').textContent = currentCount;
  });

  // 按钮点击触发计数增加（用transaction保证原子性，避免并发冲突）
  document.getElementById('increment-btn').addEventListener('click', () => {
    countRef.transaction(current => (current || 0) + 1);
  });
</script>

注：transaction方法能确保多个用户同时点击时计数不会出错，是安全的更新方式。

方案二：Supabase（基于PostgreSQL的免费方案） #

Supabase提供免费的PostgreSQL数据库，同样支持前端直接调用SDK：

• 注册Supabase账号，创建项目后新建一张counter表，包含id（主键）和value（整数，默认0）字段，确保表中只有一条记录（比如id=1）
• 引入Supabase JS SDK，初始化项目（使用项目URL和匿名密钥）
• 点击按钮时调用API更新计数，页面加载时拉取最新值

示例代码：

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

<p id="count-display">0</p>
<button id="increment-btn">点击+1</button>

<script>
  // 替换为你的Supabase项目信息
  const supabase = createClient('你的项目URL', '你的匿名密钥');

  // 获取并显示当前计数
  async function loadCurrentCount() {
    const { data, error } = await supabase
      .from('counter')
      .select('value')
      .eq('id', 1)
      .single();
    
    if (!error) {
      document.getElementById('count-display').textContent = data.value;
    }
  }
  loadCurrentCount();

  // 点击更新计数
  document.getElementById('increment-btn').addEventListener('click', async () => {
    await supabase
      .from('counter')
      .update({ value: supabase.raw('value + 1') })
      .eq('id', 1);
    
    loadCurrentCount();
  });
</script>

方案三：轻量后端函数+免费数据库（稍复杂但灵活） #

如果想尝试简单后端开发，可以用Vercel/Netlify的免费边缘函数，配合PlanetScale的免费MySQL数据库：

• 写一个简单的API函数，处理计数的读取和原子更新逻辑
• 前端点击按钮时调用该API，获取最新计数并更新页面
• 这种方案需要部署后端函数，但免费额度足够小项目使用

总结 #

优先推荐Firebase或Supabase，不需要编写后端代码，直接在前端完成数据操作，适合新手快速实现功能。后续可以根据需求优化安全规则，比如限制用户修改频率，防止恶意刷计数。

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