如何在客户端统计用户的累计站点会话访问次数？

嘿，这个需求我刚好有过实践经验，用localStorage和sessionStorage搭配完全能完美解决，我给你一步步拆解清楚：

核心思路 #

• localStorage：负责持久存储用户的总会话访问次数——它不会随浏览器关闭而清空，能跨多个会话保留数据，刚好符合你“关闭浏览器再访问才算新访问”的要求。
• sessionStorage：负责标记当前会话是否已经被计数——同一个会话内不管刷新多少次页面，都不能算作新访问，所以只要当前会话里存了标记，就不再重复累加次数。

具体代码实现 #

你可以把这段代码放在页面的DOMContentLoaded事件里，确保页面加载时就执行：

document.addEventListener('DOMContentLoaded', function() {
    // 检查当前会话是否已经计数过
    const hasVisited = sessionStorage.getItem('hasVisitedThisSession');
    
    if (!hasVisited) {
        // 从localStorage获取当前访问次数，默认0
        let visitCount = parseInt(localStorage.getItem('siteVisitCount')) || 0;
        // 次数加1
        visitCount++;
        // 存回localStorage
        localStorage.setItem('siteVisitCount', visitCount);
        // 标记当前会话已计数，避免刷新重复累加
        sessionStorage.setItem('hasVisitedThisSession', 'true');
    }

    // 获取最新的访问次数
    const currentVisitCount = parseInt(localStorage.getItem('siteVisitCount')) || 0;
    
    // 判断是否是第10次访问，展示提示
    if (currentVisitCount === 10) {
        alert('哇，你已经是第10次访问我们的站点啦！感谢你的支持😊');
        // 这里也可以换成你自己的提示组件，比如弹窗、浮层等
    }
});

关键细节说明 #

• 为什么要用sessionStorage做标记？因为如果没有这个标记，用户在同一个会话内刷新页面，localStorage的次数会一直累加，就不符合“单次浏览会话内页面加载不算新访问”的要求了。
• 关于数据丢失：如果用户手动清除浏览器缓存或使用隐私模式，localStorage的数据会被清空，访问次数会重置为0，这是浏览器存储的特性，没法完全避免，属于正常情况。
• 提示样式：代码里用了alert，你可以根据自己的需求换成自定义的弹窗、页面浮层或者其他交互形式，效果会更贴合站点风格。

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