Rails应用路由切换后持续显示JS获取的地理位置的方案咨询

你遇到的核心问题其实有两个：一是Turbo/Turbolinks的局部刷新机制导致初始化代码只执行一次，二是不想重复请求用户位置，需要持久化存储。我来一步步帮你解决：

问题根源 #

Rails默认使用Turbo（旧版本是Turbolinks）做页面导航，它不会重新加载整个页面，只会替换页面的内容部分。所以你原来绑定在$(document).ready()的代码，只有第一次打开应用时会执行，路由切换后不会重新触发，导致位置信息无法渲染到新页面的DOM里。

解决方案 #

1. 绑定到Turbo的加载事件 #

把初始化代码绑定到turbo:load事件（如果是旧版Turbolinks则用turbolinks:load），这个事件会在初始页面加载和每次Turbo导航完成后触发，确保路由切换后代码也能执行。

2. 用localStorage持久化位置信息 #

localStorage是前端持久化存储的理想选择：它存储在浏览器里，不会随请求发送给后端，容量比Cookie大，适合保存这种不需要和后端交互的用户数据。我们可以在第一次获取到位置后，把地址和过期时间存起来，后续先从缓存读取，只有当缓存过期或不存在时才重新请求位置。

修改后的完整代码 #

/* CURRENT LOCATION */
const LOCATION_STORAGE_KEY = 'user_current_location';
const LOCATION_EXPIRY_HOURS = 1; // 设置1小时过期，可按需调整

// 从localStorage获取缓存的位置
function getCachedLocation() {
  const cachedData = localStorage.getItem(LOCATION_STORAGE_KEY);
  if (!cachedData) return null;
  
  const { address, expiryTime } = JSON.parse(cachedData);
  // 检查是否过期
  if (Date.now() < expiryTime) {
    return address;
  }
  // 过期则清除缓存
  localStorage.removeItem(LOCATION_STORAGE_KEY);
  return null;
}

// 保存位置到localStorage
function saveLocationToCache(address) {
  const expiryTime = Date.now() + (LOCATION_EXPIRY_HOURS * 60 * 60 * 1000);
  localStorage.setItem(LOCATION_STORAGE_KEY, JSON.stringify({ address, expiryTime }));
}

// 更新DOM显示位置
function updateLocationDisplay(address) {
  const locationElement = document.getElementById("current_location");
  if (locationElement) {
    locationElement.innerHTML = address;
  }
}

function geolocationSuccess(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var geocoder = new google.maps.Geocoder();
  var latlng = {lat: latitude, lng: longitude};
  
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]){
        var user_address = results[0].formatted_address;
        updateLocationDisplay(user_address);
        saveLocationToCache(user_address); // 缓存地址
      }else {
        console.log('No results found for these coords.');
      }
    }else {
      console.log('Geocoder failed due to: ' + status);
    }
  });
}

function geolocationError() {
  console.log("Please enable location services for this feature to work!");
}

// 初始化逻辑
function initLocation() {
  // 先尝试读取缓存
  const cachedAddress = getCachedLocation();
  if (cachedAddress) {
    updateLocationDisplay(cachedAddress);
    return;
  }
  
  // 没有缓存则请求位置
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError);
  } else {
    alert("Geolocation not supported!");
  }
}

// 绑定到Turbo加载事件，兼容初始加载和路由切换
document.addEventListener('turbo:load', initLocation);
// 兼容旧版Turbolinks（如果你的项目还在使用）
// document.addEventListener('turbolinks:load', initLocation);

方案选择说明 #

• localStorage vs Cookie：
  • 如果你不需要后端获取这个位置信息，优先用localStorage，它更轻量，不会增加HTTP请求的负担。
  • 如果你需要后端也能读取这个位置（比如做个性化服务），可以用Cookie，但要注意Cookie的大小限制（4KB），并且会随每个请求发送给服务器，可能影响性能。
• 定时请求：如果用户的位置可能频繁变化（比如导航类应用），可以结合定时刷新，但一般场景下设置合理的过期时间（比如1-24小时）就足够了，避免不必要的权限请求和API调用。

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