深色模式状态持久化Cookie实现及Google Maps嵌入报错求助

一、深色主题状态持久化（Cookie实现） #

当前主题切换后刷新或跳转页面就恢复默认，核心原因是没有把主题状态持久化保存。以下是用Cookie实现状态留存的修改代码，同时确保页面加载时自动恢复之前的主题和对应图片：

// 读取指定名称的Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 设置Cookie，默认有效期30天，全站生效
function setCookie(name, value, days = 30) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${value}; ${expires}; path=/`;
}

// 页面加载时自动恢复主题状态
window.onload = function() {
  // 提前获取所有需要切换的元素
  const icon = document.getElementById("icon");
  const mis = document.getElementById('mis');
  const pnras = document.getElementById('pnras');
  const bulb = document.getElementById('bulb');
  const cam = document.getElementById('cam');
  const man = document.getElementById('man');
  const resurse = document.getElementById('resurse');
  const consiliu = document.getElementById('consiliu');
  const dec = document.getElementById('dec');
  const pho = document.getElementById('pho');
  const mail = document.getElementById('mail');

  // 读取保存的主题状态
  const savedTheme = getCookie('theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-theme');
    // 应用深色主题下的资源
    icon.src = "assets/white.svg";
    mis.src = "assets/misiune-b.svg";
    pnras.src = "assets/pnras-b.svg";
    bulb.src = "assets/white.svg";
    cam.src = "assets/cam-b.svg";
    man.src = "assets/man-b.svg";
    resurse.src = "assets/resurse-b.svg";
    consiliu.src = "assets/cladire-b.svg";
    dec.src = "assets/moneda-b.svg";
    pho.src = "assets/phone-b.svg";
    mail.src = "assets/mail-b.svg";
  } else {
    // 应用默认浅色主题资源
    icon.src = "assets/moon.png";
    mis.src = "assets/misiune.svg";
    pnras.src = "assets/pnras.svg";
    bulb.src = "assets/.svg"; // 注意：此处路径疑似笔误，建议检查修正
    cam.src = "assets/camera_.svg";
    man.src = "assets/management_.svg";
    resurse.src = "assets/resurse umane.svg";
    consiliu.src = "assets/ca.svg";
    dec.src = "assets/moneda.svg";
    pho.src = "assets/Phone.svg";
    mail.src = "assets/Mail.svg";
  }

  // 绑定主题切换事件
  icon.onclick = function () {
    document.body.classList.toggle("dark-theme");
    if (document.body.classList.contains("dark-theme")) {
      icon.src = "assets/white.svg";
      mis.src = "assets/misiune-b.svg";
      pnras.src = "assets/pnras-b.svg";
      bulb.src = "assets/white.svg";
      cam.src = "assets/cam-b.svg";
      man.src = "assets/man-b.svg";
      resurse.src = "assets/resurse-b.svg";
      consiliu.src = "assets/cladire-b.svg";
      dec.src = "assets/moneda-b.svg";
      pho.src = "assets/phone-b.svg";
      mail.src = "assets/mail-b.svg";
      setCookie('theme', 'dark'); // 保存深色主题状态
    } else {
      icon.src = "assets/moon.png";
      mis.src = "assets/misiune.svg";
      pnras.src = "assets/pnras.svg";
      bulb.src = "assets/.svg";
      cam.src = "assets/camera_.svg";
      man.src = "assets/management_.svg";
      resurse.src = "assets/resurse umane.svg";
      consiliu.src = "assets/ca.svg";
      dec.src = "assets/moneda.svg";
      pho.src = "assets/Phone.svg";
      mail.src = "assets/Mail.svg";
      setCookie('theme', 'light'); // 保存浅色主题状态
    }
  };
};

注意事项：

• 确保所有图片元素（如mis、pnras）在HTML中都有对应的id属性，否则需要调整元素获取方式。
• bulb.src = "assets/.svg"路径明显异常，建议检查修正为正确的资源路径。

二、Google Maps嵌入错误解决 #

net::ERR_BLOCKED_BY_CLIENT错误是浏览器端拦截工具阻止了请求，常见解决方法：

• 暂时禁用浏览器的广告拦截插件（如AdBlock、uBlock Origin），刷新页面后测试地图是否正常加载。多数拦截规则会误判Google Maps的统计类请求。
• 检查浏览器隐私设置，若开启了严格跟踪保护，可暂时降低保护级别尝试。
• 确保使用Google Maps官方提供的标准嵌入代码，不要随意修改核心参数。
• 本地开发环境（localhost）可能被拦截插件误判，可尝试部署到线上环境测试。

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