本文讲解如何在跨页面场景中，通过 localstorage 存储和安全解析地理坐标对象，并精准获取其中的 latitude（纬度）用于后续计算。

本文讲解如何在跨页面场景中，通过 localstorage 存储和安全解析地理坐标对象，并精准获取其中的 latitude（纬度）用于后续计算。

在 Web 开发中，常需将地理位置信息（如 lat 和 lng）从前一页传递到后一页进行业务计算（例如太阳能辐射估算、距离测算等）。你使用 localStorage.setItem('coordinates', JSON.stringify(coordinates)) 正确地将坐标对象序列化存储；但问题出在读取阶段：localStorage.getItem('coordinates.lat') 是无效的——localStorage 不支持点号路径访问，它仅支持按原始 key 精确查找。

✅ 正确做法是：先按原 key（'coordinates'）取出整个 JSON 字符串，再用 JSON.parse() 解析为对象，最后安全访问其 lat 属性。推荐使用可选链操作符（?.）防止解析失败时抛错：

window.onload = function () {
  const coordinatesStr = localStorage.getItem('coordinates');
  if (!coordinatesStr) {
    console.warn('未找到本地存储的 coordinates 数据');
    return;
  }

  const coordinates = JSON.parse(coordinatesStr);
  const lat = coordinates?.lat;

  if (lat === undefined || typeof lat !== 'number') {
    console.error('坐标数据格式异常：lat 缺失或非数值');
    return;
  }

  // 后续计算（示例：光伏能量估算模型）
  const IR = (-75 * lat) + 5025;
  const energie_pro = IR * 0.926 * 0.8 * 0.213 * 1.92 * 8;
  document.getElementById('eco_3000').innerText = energie_pro.toFixed(2);
};

⚠️ 注意事项：

• 永远校验 getItem 返回值：null 表示 key 不存在，直接 JSON.parse(null) 会报错；
• 避免隐式类型转换：lat 必须为数字，建议显式判断 typeof lat === 'number'；
• 错误处理不可省略：网络中断、用户清空 localStorage、JSON 格式损坏等情况均可能导致解析失败；
• 如需更高可靠性，可考虑封装工具函数：

  function getLatFromStorage() {
    const str = localStorage.getItem('coordinates');
    try {
      return JSON.parse(str)?.lat ?? null;
    } catch (e) {
      console.error('解析 coordinates 失败:', e);
      return null;
    }
  }

掌握这一“存 JSON → 取字符串 → 解析对象 → 安全取值”三步模式，即可稳健实现跨页面坐标数据传递与复用。