使用 JavaScript 记住图像和 div 的切换状态

Question

我是 HTML、CSS 和 JavaScript 的新手，我学到的知识足以制作一个首页。我有一个搜索栏，当单击侧面的图像元素（这里是搜索引擎的徽标）时，它会在两个不同的搜索引擎之间切换，并且还会切换图像元素以匹配新状态。这是 JavaScript 代码：

function toggleEngine()
{
    var gSearch = document.getElementById("gSearch"); 
    var dSearch = document.getElementById("dSearch");
    
    gSearch.style.display = (
    gSearch.style.display == "none" ? "block" : "none"); 
    dSearch.style.display = (
    dSearch.style.display == "none" ? "block" : "none");

    var logo = document.getElementById("engineLogo").src;

    if (logo.indexOf("google.svg") != -1)
    {
        document.getElementById("engineLogo").src = "icons/duck.svg";
    }
    else
    {
        document.getElementById("engineLogo").src = "icons/google.svg";
    }

    document.getElementById("textField").reset();

}

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>

默认引擎是 Google，备用引擎是 DuckDuckGo。当我刷新页面时，它总是返回到默认搜索引擎 (Google)。

如何让它记住切换状态？例如：如果我切换到 DuckDuckGo，下次打开页面时，当前搜索引擎应该是 Google。这是 live preview.

Answer 1

您可以利用浏览器的 localStorage 功能来保留当前首选的引擎。

例如，您可以在脚本中添加一个 document.onload 函数来检查浏览器 localStorage 中保存的值，并根据保存的徽标更新搜索栏中的徽标。

window.onload = function() {
  var gSearch = document.getElementById("gSearch"); 
  var dSearch = document.getElementById("dSearch");
  
  let storedLogo = localstorage.getItem('preferredEngine');
  let currentLogo;

  // if no value exists in the local storage
  if(!storedLogo){
     currentLogo = document.getElementById("engineLogo").src;
     localStorage.setItem('preferredEngine', currentLogo);
  } else {
    
    // set the logo on the basis of received from local storage
    if(storedLogo.indexOf("google.svg")){
      document.getElementById("engineLogo").src = "icons/google.svg";
      gSearch.style.display = "block";
      dSearch.style.display = "none";
    } else {
      document.getElementById("engineLogo").src = "icons/duck.svg";
      dSearch.style.display = "block";
      gSearch.style.display = "none";
    }
  }
}

此外，您可以在 toggleLogo 方法中添加以下行，以便在用户切换首选徽标时使用最新值更新 localstorage 值：

var logo = document.getElementById("engineLogo").src;
localStorage.setItem('preferredEngine', logo);

使用 JavaScript 记住图像和 div 的切换状态

Remembering toggled state of an image and a div using JavaScript

html

javascript

toggle