一款傻瓜式操作，引入第三方的前端数据统计代码！
根据你的需求，以下是一个 极简、无需服务器配置、数据不丢失的纯前端统计方案，基于 FiniCounter（无需安装任何软件，完全托管服务）。它适合大流量网站，且数据由第三方服务持久化存储，即使你的服务器重启也不会清零。
方案：FiniCounter 静态网站访问量统计
特点：
- 零配置：只需在网页中添加两行代码。
- 高流量支持：由第三方服务处理计数，无需担心服务器压力。
- 数据持久化：统计结果存储在 FiniCounter 的服务器上，不会因你的服务器重启而丢失。
- 无需后端代码：纯前端实现。
步骤
1. 引入 FiniCounter 统计代码
在你的网页 `<body>` 或 `<footer>` 中添加以下代码：
html
<!-- 引入 FiniCounter 统计脚本 -->
<script async src="https://finicounter.eu.org/finicounter.js"></script>
<!-- 显示访问量的容器，id 必须为 finicount_views -->
<span id="finicount_views"></span>
2. 在页面中显示访问量
在需要显示访问量的位置插入以下代码：
html
<div>总访问量：<span id="finicount_views"></span></div>
效果示例
页面加载后，访问量会自动显示为类似 `12,345,678` 的格式（数字会自动用逗号分隔）。
原理
1. 数据存储：
- FiniCounter 的服务器会根据你的网站域名（`window.location.hostname`）自动统计访问量。
- 数据持久化存储在 FiniCounter 的后端，你的服务器无需参与存储。
2. 计数逻辑：
- 每次用户访问页面时，浏览器会向 FiniCounter 的服务器发送一个请求，服务器端会自动累加计数。
- 高流量下，FiniCounter 的服务器会处理并发请求，确保计数准确。
3. 显示逻辑：
- 前端通过 `fetch` 获取当前访问量，并渲染到页面的 `finicount_views` 容器中。
优势
- 完全托管：无需维护服务器或数据库。
- 高并发支持：FiniCounter 的服务端设计支持高流量场景。
- 数据安全：即使你的网站服务器崩溃或重启，统计结果仍会保留。
注意事项
1. 依赖第三方服务：
- 统计结果依赖 FiniCounter 的服务器可用性，需确保其服务稳定。
- 如果需要自托管，可以参考其开源代码（[GitHub](https://github.com/Finisky/finicounter)）部署到自己的服务器。
2. 数据粒度：
- 该方案仅统计 总访问量，无法区分独立访客（UV）或记录详细访问路径。
替代方案（自托管）
如果你希望 完全自托管，且服务器支持简单的 API，可以使用以下方法：
步骤：
1. 创建计数 API：
在你的服务器上部署一个简单的计数接口（如 Node.js）：
javascript
// count.js (Node.js 示例)
const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.json());
app.post('/count', (req, res) => {
let count = 0;
try {
count = parseInt(fs.readFileSync('count.txt', 'utf8')) || 0;
} catch (err) {
// 文件不存在时初始化为 0
}
fs.writeFileSync('count.txt', (count + 1).toString());
res.send({ count: count + 1 });
});
app.listen(3000, () => {
console.log('Count server running on port 3000');
});
2. 前端代码：
在页面中添加以下 JavaScript：
html
<script>
async function updateCount() {
try {
const response = await fetch('/count', { method: 'POST' });
const data = await response.json();
document.getElementById('visitCount').textContent = data.count;
} catch (error) {
console.error('计数失败:', error);
}
}
document.addEventListener('DOMContentLoaded', () => {
updateCount();
});
</script>
<div>总访问量：<span id="visitCount">0</span></div>
3. 数据持久化：
- 计数结果存储在服务器的 `count.txt` 文件中，重启后仍会保留。
总结
- 推荐方案：使用 FiniCounter，完全符合你的需求（极简、高流量、不丢失）。
- 自托管方案：适合需要完全控制数据的场景，但需要部署简单后端服务。
如果需要进一步优化或自定义统计逻辑，可以结合后端代码实现更复杂的需求。
