三步实现网站访问统计：用js-cookie追踪用户行为数据
项目地址: https://gitcode.com/gh_mirrors/js/js-cookie 你是否需要了解网站访客的停留时间、访问频率？还在为复杂的统计工具配置烦恼？本文将用不到20行代码，基于轻量级库js-cookie实现完整的访问统计功能，无需后端支持即可获取关键用户数据。
核心原理与数据指标设计
网站访问统计的本质是记录用户与网站的交互数据。我们将通过js-cookie实现以下核心指标追踪：
- 首次访问时间（识别新用户）
- 最近访问时间（计算活跃用户）
- 访问次数（用户粘性分析）
- 停留时长（内容吸引力评估）
js-cookie提供了简洁的API操作浏览器Cookie，其核心方法在src/api.mjs中实现：
set(name, value, options): 设置Cookieget(name): 获取Cookie值remove(name): 删除Cookie
实现步骤与代码示例
1. 引入js-cookie库
通过CDN方式快速引入（国内加速地址）：
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"></script>
或使用项目本地文件：
<script src="/index.js"></script>
2. 核心统计逻辑实现
创建访客追踪脚本visitor-tracker.js，实现完整统计功能：
// 初始化统计Cookie（有效期30天）
function initVisitorStats() {
const cookieConfig = {
expires: 30,
path: '/'
};
// 获取现有统计数据
const stats = Cookies.get('visitorStats')
? JSON.parse(Cookies.get('visitorStats'))
: {
firstVisit: new Date().toISOString(),
visitCount: 0,
lastVisit: null,
totalDuration: 0
};
// 更新访问计数与时间戳
const now = new Date();
const prevVisit = stats.lastVisit ? new Date(stats.lastVisit) : null;
// 计算上次停留时长（首次访问不计入）
if (prevVisit) {
const duration = Math.round((now - prevVisit) / 1000); // 秒数
stats.totalDuration += duration;
}
// 更新统计数据
stats.visitCount++;
stats.lastVisit = now.toISOString();
// 保存到Cookie
Cookies.set('visitorStats', JSON.stringify(stats), cookieConfig);
// 曝光统计数据（实际项目中可发送到后端）
console.log('用户统计数据:', stats);
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', initVisitorStats);
// 页面离开时更新最后访问时间
window.addEventListener('beforeunload', () => {
const stats = Cookies.get('visitorStats') ? JSON.parse(Cookies.get('visitorStats')) : {};
if (stats.lastVisit) {
stats.lastVisit = new Date().toISOString();
Cookies.set('visitorStats', JSON.stringify(stats), { path: '/' });
}
});
3. 数据读取与展示
创建数据展示组件，在管理后台页面嵌入：
// 读取并格式化统计数据
function displayVisitorStats() {
const stats = Cookies.get('visitorStats') ? JSON.parse(Cookies.get('visitorStats')) : null;
if (!stats) {
console.log('暂无统计数据');
return;
}
// 格式化数据
const statsHTML = `
<div class="stats-card">
<h3>访问统计</h3>
<p>首次访问: ${new Date(stats.firstVisit).toLocaleString()}</p>
<p>访问次数: ${stats.visitCount}次</p>
<p>上次访问: ${new Date(stats.lastVisit).toLocaleString()}</p>
<p>累计停留: ${Math.round(stats.totalDuration / 60)}分钟</p>
</div>
`;
// 插入到页面
document.getElementById('stats-container').innerHTML = statsHTML;
}
高级功能扩展
自定义Cookie配置
通过js-cookie的withAttributes方法创建自定义配置实例：
// 创建跨域统计Cookie实例（[src/api.mjs](https://link.gitcode.com/i/231fccd3b03c05581014bf9e1eedab9e)第89行）
const crossDomainStats = Cookies.withAttributes({
path: '/',
domain: '.example.com', // 主域共享Cookie
secure: true, // 仅HTTPS传输
sameSite: 'lax'
});
// 使用自定义实例
crossDomainStats.set('globalStats', JSON.stringify(data));
数据可视化实现
结合Chart.js创建访问趋势图表（需引入Chart.js库）：
// 绘制访问次数趋势图
function renderVisitChart() {
const stats = JSON.parse(Cookies.get('visitorStats') || '{}');
const ctx = document.getElementById('visitChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['首次访问', '最近访问'],
datasets: [{
label: '访问次数',
data: [1, stats.visitCount],
borderColor: '#3e95cd',
tension: 0.1
}]
}
});
}
部署与注意事项
隐私合规处理
根据GDPR和国内法规要求，需添加Cookie consent提示：
<div id="cookie-consent" style="position:fixed;bottom:0;padding:10px;background:#f5f5f5;">
本网站使用Cookie统计访问数据，继续浏览即表示同意
<button onclick="this.parentElement.remove();">同意</button>
</div>
性能优化建议
- 延迟加载统计脚本，优先保证页面渲染
<script src="visitor-tracker.js" defer></script>
- 使用Cookie前缀区分统计数据
// 便于多维度统计（[src/api.mjs](https://link.gitcode.com/i/231fccd3b03c05581014bf9e1eedab9e)第5行set方法）
Cookies.set('stats_visitCount', 5);
Cookies.set('stats_lastVisit', '2025-10-08');
完整实现文件结构
project-root/
├── index.html # 网站主页
├── index.js # js-cookie入口文件
├── visitor-tracker.js # 统计脚本
└── src/
└── api.mjs # Cookie核心API实现
通过本文方法，你已掌握基于js-cookie的轻量级访问统计方案。该实现无需后端数据库支持，所有数据存储在客户端，适合中小网站或快速原型验证。如需更复杂的分析，可将Cookie数据定期同步至后端服务。
关注项目README.md获取js-cookie最新版本更新，或查看test/tests.js了解更多API使用示例。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
