用 Cookie 实现前端访问计数器，每次页面加载读取、递增并写回 count 值；依赖 document.cookie 读写，支持跨路径共享但受大小限制、可被清除且不防刷，仅适用于轻量级用户级展示。
用 Cookie 实现简单访问计数器，核心是每次页面加载时读取、递增、再写回 Cookie。它不依赖后端，适合轻量场景（如统计单个用户重复访问次数），但要注意 Cookie 有大小限制（通常 4KB）、可被用户禁用或清除，且无法跨域共享。
读取和解析当前计数值
Cookie 是以字符串形式存储的键值对，格式如 count=5; path=/; expires=...，需手动解析：
- 用
document.cookie获取全部 Cookie 字符串 - 按分号空格分割，再遍历查找以
count=开头的项 - 用
parseInt()转为数字，若不存在或非数字则默认设为0
递增并写入新值
更新后需重新设置 Cookie，注意指定有效期和作用域，避免会话级 Cookie 在关闭浏览器后丢失：
- 使用
document.cookie = "count=" + newValue + "; path=/; max-age=31536000;" -
path=/确保整个站点可读；max-age=31536000表示保存一年（单位秒） - 避免用
expires（需完整日期字符串），max-age更直观可靠
完整示例代码
把以下代码放在 <script> 标签中，即可在页面显示并更新计数：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
function getCookie(name) {
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [key, value] = cookie.split('=');
if (key === name) return parseInt(value, 10) || 0;
}
return 0;
}
function setCookie(name, value) {
document.cookie = `${name}=${value}; path=/; max-age=31536000`;
}
const count = getCookie('count') + 1;
setCookie('count', count);
document.getElementById('counter').textContent = count;
对应 HTML：<div>你已访问本页 <span id="counter"></span> 次</div>
注意事项与局限
这个方案轻便但有明显边界：
- 同一浏览器同一域名下所有页面共享该 Cookie，不是“每页独立计数”
- 用户清空 Cookie 或启用无痕模式，计数即重置
- 不防刷：用户可手动修改 Cookie 值，仅作前端展示用途，不可用于关键逻辑或统计报表
- 若需更可靠统计，应配合服务端记录 IP/UA 或使用 localStorage + 定期上报
