如何用JavaScript记住搜索引擎切换状态，页面刷新不重置

嘿，这个问题我之前也遇到过！想要页面记住用户选择的搜索引擎，咱们可以利用浏览器的localStorage来搞定——它能把数据存在用户的浏览器里，就算刷新页面甚至关掉浏览器再打开，状态也不会丢失。

下面是修改后的完整代码，我会给你拆解关键逻辑：

修改后的JavaScript代码 #

// 页面加载时初始化搜索引擎状态
function initSearchEngine() {
  // 从localStorage读取保存的引擎，默认用Google
  const savedEngine = localStorage.getItem('selectedSearchEngine') || 'google';
  const gSearch = document.getElementById("gSearch");
  const dSearch = document.getElementById("dSearch");
  const engineLogo = document.getElementById("engineLogo");

  // 根据保存的状态设置表单显示和Logo
  if (savedEngine === 'google') {
    gSearch.style.display = 'block';
    dSearch.style.display = 'none';
    engineLogo.src = 'icons/google.svg';
  } else {
    gSearch.style.display = 'none';
    dSearch.style.display = 'block';
    engineLogo.src = 'icons/duck.svg';
  }
}

function toggleEngine() {
  const gSearch = document.getElementById("gSearch");
  const dSearch = document.getElementById("dSearch");
  const engineLogo = document.getElementById("engineLogo");
  
  // 判断当前显示的是哪个引擎
  const isGoogleActive = gSearch.style.display !== 'none';
  
  // 切换两个搜索表单的显示状态
  gSearch.style.display = isGoogleActive ? 'none' : 'block';
  dSearch.style.display = isGoogleActive ? 'block' : 'none';
  
  // 切换Logo并把当前选择的引擎保存到localStorage
  if (isGoogleActive) {
    engineLogo.src = 'icons/duck.svg';
    localStorage.setItem('selectedSearchEngine', 'duckduckgo');
  } else {
    engineLogo.src = 'icons/google.svg';
    localStorage.setItem('selectedSearchEngine', 'google');
  }
  
  document.getElementById("textField").reset();
}

// 页面加载完成后自动执行初始化
window.onload = initSearchEngine;

关键逻辑说明 #

1. 初始化函数initSearchEngine：
   • 页面加载时，先从localStorage里读取之前保存的搜索引擎（如果没有保存过，默认用Google）。
   • 根据读取到的状态，对应显示/隐藏搜索表单，同时切换Logo图片。
2. 切换函数toggleEngine：
   • 切换表单显示状态的同时，把当前选择的引擎名称存入localStorage，这样下次打开页面就能读取这个值。
3. window.onload：确保页面所有元素加载完成后再执行初始化，避免找不到DOM元素的问题。

对应的HTML代码（无需额外修改，保留原代码即可） #

<html>
<body>
  <div class="search_box">
    <img class="engine" id="engineLogo" src="icons/google.svg" onclick="toggleEngine()" style="cursor:pointer" />
    <div id="gSearch" style="display:block;">
      <form id="textField" class="google" action="https://google.com/search" method="get">
        <input class="input_box" type="text" name="q" placeholder="Search with Google">
        <button class="button">
          <img src="icons/search.svg" style="cursor:pointer" /></button>
      </form>
    </div>
    <div id="dSearch" style="display:none;">
      <form class="duck" action="https://duckduckgo.com/" method="get">
        <input class="input_box" type="text" name="q" placeholder="Search with DuckDuckGo">
        <button class="button">
          <img src="icons/search.svg" style="cursor:pointer" /></button>
      </form>
    </div>
  </div>
</body>
</html>

小提示 #

• 确保你的图标文件路径icons/google.svg和icons/duck.svg是正确的，不然Logo可能加载失败。
• localStorage是同源存储的，只有同一个域名下的页面才能访问这些数据，完全符合起始页的使用场景。

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