如何在网站上显示用户上次访问的城市和国家-js教程-PHP中文网

如何在网站上显示用户上次访问的城市和国家

通过前端获取地理位置并结合后端存储，实现“上次访问来自xx城市，xx国家”的动态提示功能。需借助ip定位服务、服务器端持久化及前端展示逻辑。

要在网页右下角（或其他位置）显示类似 “Last visit from Tokyo, Japan” 的提示，仅靠纯前端 JavaScript（如 navigator.geolocation.getCurrentPosition()）是无法实现的——因为该 API 仅能获取当前会话的精确地理位置，且需用户授权、不适用于无 GPS 的桌面环境，更无法追溯“上次访问”信息。

真正的解决方案依赖前后端协同：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

✅ 核心逻辑流程

每次用户访问页面时，前端向你的后端发起请求（如 /api/track-visit）；
后端通过请求的 IP 地址调用第三方 IP 归属地服务（如 ipapi.co、ipgeolocation.io 或 MaxMind GeoLite2），解析出 city 和 country_name；
后端将该地理位置信息连同时间戳存入数据库（如 Redis 快速缓存或 PostgreSQL 持久表），并更新为该用户的“最新访问记录”；
前端在页面加载时，再发起一次轻量请求（如 /api/last-visit）获取已存储的上一次有效位置，并渲染到 DOM 中。

? 示例：简易后端（Node.js + Express）

// server.js（需安装 axios）
app.get('/api/last-visit', (req, res) => {
  // 假设使用 Redis 存储：key = 'last_visit:123.45.67.89'
  const ip = req.ip || req.connection.remoteAddress;
  redis.get(`last_visit:${ip}`, (err, data) => {
    if (data) {
      res.json(JSON.parse(data)); // { city: "Berlin", country: "Germany", timestamp: "2024-05-20T14:22:00Z" }
    } else {
      res.json({ city: "Unknown", country: "Unknown" });
    }
  });
});

app.get('/api/track-visit', async (req, res) => {
  const ip = req.ip || req.connection.remoteAddress;
  try {
    const geoRes = await axios.get(`https://www.php.cn/link/8e9368bb8083221506d9b1c83c5c7d95${ip}/json/`, {
      headers: { 'User-Agent': 'YourSite/1.0' }
    });
    const { city, country_name } = geoRes.data;
    const record = { city, country: country_name, timestamp: new Date().toISOString() };
    redis.setex(`last_visit:${ip}`, 60 * 60 * 24 * 7, JSON.stringify(record)); // 缓存7天
    res.json(record);
  } catch (e) {
    res.json({ city: "Unknown", country: "Unknown" });
  }
});

?️ 前端展示（HTML + JS）

<div id="last-visit-banner" style="position:fixed;bottom:20px;right:20px;background:#fff;padding:10px 16px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,0.1);font-size:14px;z-index:1000;">
  Last visit from <span id="lv-city">—</span>, <span id="lv-country">—</span>
</div>

// 在页面加载完成后执行
async function loadLastVisit() {
  try {
    const res = await fetch('/api/last-visit');
    const data = await res.json();
    document.getElementById('lv-city').textContent = data.city || '—';
    document.getElementById('lv-country').textContent = data.country || '—';
  } catch (e) {
    console.warn('Failed to load last visit info', e);
  }
}
loadLastVisit();

// 可选：每次页面可见时刷新追踪（提升准确性）
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) fetch('/api/track-visit').catch(() => {});
});