Tumblr访问计数器总访问量跨浏览器不持久问题解决请求

问题背景 #

为Tumblr搭建的访问计数器仅能在单个浏览器内保留计数，切换至其他浏览器后，刷新页面计数会重置为1，无法累计总访问量。当前实现代码如下：

HTML #

<script defer src="hit-counter.js"></script>
<link rel="stylesheet" href="hit-counter.css" />
<span class="website-counter"></span>

CSS #

.website-counter {
  color: black;
  font-weight: bold;
  font-size: 12px;
  font-family: verdana;
}

JavaScript #

var counterContainer = document.querySelector(".website-counter");
var visitCount = localStorage.getItem("page_view");

if (visitCount) {
  visitCount = Number(visitCount) + 1;
  localStorage.setItem("page_view", visitCount);
} else {
  visitCount = 1;
  localStorage.setItem("page_view", 1);
}
counterContainer.innerHTML = visitCount;

问题原因 #

当前代码使用localStorage存储计数，而localStorage是浏览器本地存储机制，数据仅保存在当前浏览器的本地环境中，不同浏览器（甚至同一浏览器的不同用户配置文件）之间无法共享数据，因此跨浏览器访问时会重新初始化计数。

解决方案 #

要实现跨浏览器累计计数，必须将计数存储在远程服务器上，而非本地。以下是两种适合Tumblr的无后端实现方案：

方案1：使用Google Sheets + Apps Script #

利用Google Sheets存储计数，通过Apps Script提供接口实现跨域请求：

1. 创建Google Sheet，在Sheet1的A1单元格输入count，A2单元格初始值设为0。
2. 打开Google Apps Script，替换默认代码为：

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  let count = parseInt(sheet.getRange("A2").getValue());
  
  count += 1;
  sheet.getRange("A2").setValue(count);
  
  return ContentService.createTextOutput(count)
    .setMimeType(ContentService.MimeType.TEXT)
    .setHeaders({"Access-Control-Allow-Origin": "*"});
}

3. 部署为Web应用：设置权限为「任何人，甚至匿名」，复制部署后的URL。
4. 修改hit-counter.js代码：

const counterContainer = document.querySelector(".website-counter");
// 替换为你的Apps Script部署URL
const API_URL = "https://script.google.com/macros/s/你的部署ID/exec";

fetch(API_URL)
  .then(res => res.text())
  .then(count => {
    counterContainer.innerHTML = count;
  })
  .catch(err => {
    // 请求失败时 fallback到本地存储
    let visitCount = localStorage.getItem("page_view");
    visitCount = visitCount ? Number(visitCount) + 1 : 1;
    localStorage.setItem("page_view", visitCount);
    counterContainer.innerHTML = visitCount;
  });

方案2：使用Firebase Realtime Database #

借助Firebase免费存储服务实现远程计数：

1. 新建Firebase项目，开启Realtime Database，设置规则（测试用）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

2. 获取数据库URL（格式类似https://你的项目ID-default-rtdb.firebaseio.com/）。
3. 修改hit-counter.js代码：

const counterContainer = document.querySelector(".website-counter");
// 替换为你的Firebase数据库URL
const DB_URL = "https://你的项目ID-default-rtdb.firebaseio.com";

fetch(`${DB_URL}/count.json`)
  .then(res => res.json())
  .then(currentCount => {
    const newCount = (currentCount || 0) + 1;
    return fetch(`${DB_URL}/count.json`, {
      method: "PUT",
      body: JSON.stringify(newCount)
    }).then(() => newCount);
  })
  .then(newCount => {
    counterContainer.innerHTML = newCount;
  })
  .catch(err => {
    // 请求失败时 fallback到本地存储
    let visitCount = localStorage.getItem("page_view");
    visitCount = visitCount ? Number(visitCount) + 1 : 1;
    localStorage.setItem("page_view", visitCount);
    counterContainer.innerHTML = visitCount;
  });

注意事项 #

• Google Apps Script免费版有请求配额限制，个人博客完全够用；部署后需等待几分钟生效。
• Firebase免费版有存储和带宽限制，满足个人博客需求；正式使用可调整数据库规则提升安全性。
• 若不想依赖第三方服务，需自行搭建后端，但Tumblr不支持部署自定义后端代码，因此第三方远程存储是唯一可行路径。

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