通过前端获取地理位置并结合后端持久化存储，可实现在网页底部动态展示“last visit from [city], [country]”提示，解决纯前端 `getcurrentposition()` 无法记录历史位置的局限。

要在网站上实现类似 rauno.me 底部右下角的「Last visit from...」动态地理信息提示（如 Last visit from Tokyo, Japan），仅靠纯前端 JavaScript 是无法完成的——因为浏览器的 navigator.geolocation.getCurrentPosition() 只能获取当前访问者的实时位置，且需用户授权、存在精度限制，更重要的是：它无法记住“上一次”是谁、从哪里来。

真正的实现逻辑分为前后端协同两步：

✅ 前端：

获取并上报当前位置（一次性的）

使用 Geolocation API 获取用户粗略坐标（经/纬度），再通过地理编码服务转换为城市与国家：

// 前端：获取位置并发送至后端
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    async (position) => {
      const { latitude, longitude } = position.coords;
      try {
        // 调用后端接口保存本次访问位置（含IP辅助增强准确性）
        await fetch('/api/update-last-visit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ lat: latitude, lng: longitude })
        });
      } catch (err) {
        console.warn('Failed to save visit location:', err);
      }
    },
    (error) => {
      console.log('Geolocation denied or unavailable — falling back to IP-based lookup');
      // 可选：退回到后端基于 IP 的地理定位（更稳定、无需授权）
      updateVisitFromIP();
    }
  );
}

✅ 后端：存储 + 查询 + 地理编码（关键环节）

你必须部署一个轻量后端（如 Node.js + Express、Python Flask 或 PHP）来：

• 接收前端传来的坐标（或直接解析请求 IP）；
• 调用地理编码 API（如 OpenCage、Nominatim 或商业服务）将坐标/IP 转为结构化地址；
• 持久化保存最新访问记录（例如存入 Redis 快取或 SQLite/PostgreSQL 表）；
• 提供 /api/last-visit 接口供前端读取已格式化的城市+国家。

示例（Node.js + OpenCage）：

// POST /api/update-last-visit
app.post('/api/update-last-visit', async (req, res) => {
  const { lat, lng } = req.body;
  const response = await fetch(
    `https://api.opencagedata.com/geocode/v1/json?q=${lat}+${lng}&key=YOUR_KEY&no_annotations=1`
  );
  const data = await response.json();
  if (data.results?.length) {
    const { city, country } = data.results[0].components;
    const locationStr = `${city || 'Unknown city'}, ${country || 'Unknown country'}`;
    // 存入 Redis（过期时间可设7天）
    redis.setex('last_visit_location', 60 * 60 * 24 * 7, locationStr);
  }
  res.sendStatus(200);
});

✅ 前端展示：异步加载并渲染

页面加载时，向后端请求已缓存的最后访问地，并安全插入 DOM：

// 页面就绪后加载上次访问地
async function showLastVisit() {
  try {
    const res = await fetch('/api/last-visit');
    const { location } = await res.json(); // e.g. { location: "Berlin, Germany" }
    document.getElementById('last-visit').textContent = 
      `Last visit from ${location}`;
  } catch (e) {
    document.getElementById('last-visit').textContent = 
      'Last visit from Unknown location';
  }
}
showLastVisit();

  Loading...

⚠️ 注意事项

• 隐私合规：需在 GDPR/CCPA 等法规下明确告知用户位置数据用途，并提供关闭选项；
• IP 定位更实用：相比 getCurrentPosition()，服务端基于 IP 的地理定位（如 ipapi.co）无需用户授权、兼容性更好、适合首次访客；
• 避免过度请求：对同一用户可设置 24 小时内不重复更新，防止刷量；
• 降级策略：当地理编码失败时，至少返回国家（country_code 字段），保证基础可用性。

总结：这不是一个纯前端技巧，而是一个「前端采集 → 后端处理+存储 → 前端展示」的闭环功能。核心价值在于用极简 UI 增强访客感知与网站专业感——只要后端有一台云函数或 VPS，即可低成本实现。