如何阻止Firefox与Safari在每次页面加载时触发位置权限提示？

嘿，我太懂你的烦恼了——每次页面跳转都弹位置权限请求，用户体验简直糟透了，而且Firefox和Safari确实不像Chrome那样默认帮你缓存这个权限状态。不过咱们可以通过缓存用户的位置信息和权限状态来彻底解决这个问题，不用再让用户反复授权。

下面是具体的解决方案和修改后的代码：

核心思路 #

我们可以利用浏览器的localStorage来缓存两种关键信息：

• 用户已经授权后获取到的位置坐标
• 用户拒绝权限的状态

这样每次页面加载时，先检查本地缓存：有缓存就直接用，没有再触发地理定位请求，从根源上避免重复弹出权限提示。

修改后的代码示例 #

1. 优化获取位置的主函数 #

首先修改getUserLocation，加入缓存检查逻辑：

function getUserLocation() {
  // 先读取本地缓存的信息
  const cachedLocation = localStorage.getItem('userLocation');
  const hasDeniedPermission = localStorage.getItem('locationPermissionDenied') === 'true';

  // 如果用户之前拒绝过权限，直接显示阻止提示
  if (hasDeniedPermission) {
    displayBlockedLocation();
    return;
  }

  // 如果有缓存的位置信息，直接用缓存数据执行后续逻辑
  if (cachedLocation) {
    const userLocation = JSON.parse(cachedLocation);
    // 模拟position对象结构，适配原有的handleUserLocation函数
    handleUserLocation({ coords: userLocation });
    return;
  }

  // 没有缓存的情况，再调用地理定位API
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      handleUserLocation,
      handleLocationError,
      {
        maximumAge: 300000, // 允许使用5分钟内的浏览器缓存位置
        timeout: 5000 // 5秒超时，避免用户一直等
      }
    );
  } else {
    displayBlockedLocation();
  }
}

2. 更新位置成功后的处理逻辑 #

在handleUserLocation里加入缓存位置的代码，同时清除拒绝权限的状态：

function handleUserLocation(position) {
  const userLocation = {
    lat: position.coords.latitude,
    lng: position.coords.longitude,
  };
  // 把位置信息存到本地存储
  localStorage.setItem('userLocation', JSON.stringify(userLocation));
  // 如果之前有拒绝状态，清除掉
  localStorage.removeItem('locationPermissionDenied');

  // 以下是你原来的逻辑，保持不变
  let nearestStore = null;
  let nearestDistance = Infinity;

  storeLocations.forEach((storeLocation) => {
    const distance = calculateDistance(
      userLocation.lat,
      userLocation.lng,
      storeLocation.lat,
      storeLocation.lng
    );
    if (distance < nearestDistance) {
      nearestDistance = distance;
      nearestStore = storeLocation;
    }
  });

  const distanceInMiles = nearestDistance * 0.621371;
  if (distanceInMiles <= 50) {
    displayMessage(nearestStore, distanceInMiles);
  } else {
    displayBlockedLocation();
  }
}

3. 更新权限拒绝后的处理逻辑 #

在handleLocationError里记录用户拒绝权限的状态：

function handleLocationError(error) {
  if (error.code === error.PERMISSION_DENIED) {
    // 存储用户拒绝权限的状态
    localStorage.setItem('locationPermissionDenied', 'true');
    displayBlockedLocation();
  }
}

额外说明 #

• maximumAge参数：这个参数告诉浏览器可以使用多久之前的缓存位置（这里设置的是5分钟），如果用户近期已经授权过，浏览器可能直接返回缓存的位置，不用再弹提示，进一步优化体验。
• 缓存有效期：如果你的业务需要实时位置，可以在存储位置时加上时间戳，下次检查缓存时判断是否过期，过期就重新请求。
• 隐私合规：当用户清除浏览器缓存时，存储的信息会被删除，这完全符合浏览器的隐私规范，不用担心合规问题。

备注：内容来源于stack exchange，提问作者Maycie Morris