当前位置：首页 > 文章列表 > 文章 > 前端 > 用户上次访问城市国家显示方法

用户上次访问城市国家显示方法

2026-02-12 16:21:50 0浏览收藏

你在学习文章相关的知识吗？本文《用户上次访问城市国家如何显示》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

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

通过前后端协同实现“上次访问来自XX城市、XX国家”的提示功能，需借助地理定位API获取位置，并由服务器持久化存储，前端再动态加载展示。

要在网页底部（如右下角）显示类似 “Last visit from Tokyo, Japan” 的提示，纯前端 JavaScript 无法可靠实现——因为浏览器不允许跨会话自动获取并持久化用户地理位置，navigator.geolocation.getCurrentPosition() 仅能实时获取当前定位，且需用户授权、不支持后台静默调用，更无法追溯“上次访问”。

✅ 正确实现路径如下：

1. 前端：获取并上报本次位置（需用户授权）

// 示例：获取当前位置并发送至后端
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      // 调用后端接口保存本次位置
      fetch('/api/update-last-visit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ lat: latitude, lng: longitude })
      });
    },
    (error) => {
      console.warn('定位被拒绝或不可用，跳过位置上报');
      // 可选：回退到IP地理库（见下文说明）
    }
  );
} else {
  console.log('浏览器不支持地理定位');
}

2. 后端：存储 + IP 地理补位（关键！）

✅ 推荐方案：使用 IP 地理数据库（如 ipapi.co、ipgeolocation.io 或开源库 maxmind/GeoLite2）
用户首次访问时，服务端通过其 X-Forwarded-For 或 req.ip 获取真实 IP，查询对应城市/国家，并存入数据库（如 Redis 或 SQL 表），字段建议包括：user_id_or_session_hash, city, country, updated_at。

? 示例 Node.js（Express）逻辑：

app.post('/api/update-last-visit', async (req, res) => {
const { lat, lng } = req.body;
let location = { city: 'Unknown', country: 'Unknown' };

if (lat && lng) {
  // 使用逆地理编码 API（如 OpenStreetMap Nominatim 或 Mapbox）
  const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
  const data = await response.json();
  location = {
    city: data.address.city || data.address.town || data.address.village || 'Unknown',
    country: data.address.country || 'Unknown'
  };
} else {
  // 回退：用客户端 IP 查询（更稳定，无需授权）
  const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
  const geoRes = await fetch(`https://ipapi.co/${ip}/json/`);
  const geo = await geoRes.json();
  location = { city: geo.city || 'Unknown', country: geo.country_name || 'Unknown' };
}

// 存入数据库（示例：Redis）
await redis.setex(`last_visit:${req.session.id || ip}`, 3600 * 24 * 30, JSON.stringify(location));
res.sendStatus(200);
});

3. 前端：异步加载并展示“上次访问”信息

<!-- 放在页面底部 -->
<div id="last-visit-banner" style="position:fixed;bottom:20px;right:20px;background:#fff;padding:8px 16px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.1);font-size:14px;display:none;">
  Last visit from <strong id="lv-city">—</strong>, <strong id="lv-country">—</strong>
</div>

// 加载上次访问记录（无阻塞，不影响首屏）
async function loadLastVisit() {
  try {
    const res = await fetch('/api/last-visit');
    const { city, country } = await res.json();
    if (city !== 'Unknown') {
      document.getElementById('lv-city').textContent = city;
      document.getElementById('lv-country').textContent = country;
      document.getElementById('last-visit-banner').style.display = 'block';
    }
  } catch (e) {
    console.debug('未能加载上次访问信息');
  }
}
loadLastVisit();