如何让JavaScript蜡烛计数刷新后不丢失？求数据库连接指导

你当前的代码把计数存在浏览器的内存变量里，页面刷新后变量就会被清空，所以得把计数持久化存到数据库里，需要后端代码配合前端完成读写操作。下面给你一步步的实现步骤，用新手最容易上手的PHP+MySQL组合（如果你的服务器支持其他后端语言，核心逻辑可以直接类比）：

1. 创建数据库存储表 #

登录你的数据库管理工具（比如phpMyAdmin），执行以下SQL语句创建一个专门存蜡烛计数的表：

CREATE TABLE candle_counts (
    id INT PRIMARY KEY AUTO_INCREMENT,
    total INT NOT NULL DEFAULT 0
);
-- 插入初始计数（默认从0开始）
INSERT INTO candle_counts (total) VALUES (0);

2. 编写后端接口（两个PHP文件） #

拆分两个简单接口，分别负责读取当前计数和增加计数：

接口1：get_count.php（获取当前蜡烛总数） #

<?php
// 替换成你的数据库信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询当前总计数
$sql = "SELECT total FROM candle_counts WHERE id = 1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo $row["total"];
} else {
    echo "0";
}
$conn->close();
?>

接口2：add_candle.php（增加一个蜡烛计数） #

<?php
// 替换成你的数据库信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 执行计数+1操作
$sql = "UPDATE candle_counts SET total = total + 1 WHERE id = 1";
if ($conn->query($sql) === TRUE) {
    echo "success";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>

3. 修改前端代码 #

把原来的前端代码改成通过AJAX请求后端接口的形式，实现页面加载读取计数、点击按钮更新计数的功能：

<!DOCTYPE html>
<html>
<body>
    <button onclick="lightCandle()">Light a Candle</button>
    <p id="candle"></p>

    <script>
        // 页面加载完成后，先获取最新的蜡烛总数
        window.onload = function() {
            fetch('get_count.php')
                .then(res => res.text())
                .then(count => {
                    document.getElementById("candle").innerHTML = count + " Candles lit";
                });
        };

        function lightCandle() {
            // 请求后端增加计数
            fetch('add_candle.php')
                .then(() => {
                    // 计数更新后，重新获取最新数值并刷新页面显示
                    fetch('get_count.php')
                        .then(res => res.text())
                        .then(count => {
                            document.getElementById("candle").innerHTML = count + " Candles lit";
                        });
                });
        }
    </script>
</body>
</html>

新手注意事项 #

• 一定要把两个PHP文件里的数据库连接信息（服务器名、用户名、密码、数据库名）替换成你自己的，确保和网站数据库匹配。
• 如果你的服务器用的是Node.js、Python等其他后端语言，核心逻辑完全一致：写接口读取数据库计数、写接口更新计数，前端用fetch调用这些接口即可。
• 要是怕有人恶意刷蜡烛，可以后续加个简单限制，比如记录访客IP，一段时间内只允许点一次（这个可以先不用急，等核心功能跑通再优化）。

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