Запоминание переключенного состояния изображения и div с помощью JavaScript - PullRequest
Новая
       25

Запоминание переключенного состояния изображения и div с помощью JavaScript

0 голосов
/ 09 июля 2020

Я новичок ie в HTML, CSS и JavaScript, и я узнал достаточно, чтобы сделать стартовую страницу. У меня есть панель поиска, которая переключается между двумя разными поисковыми системами при нажатии на элемент изображения (здесь это lo go поисковой системы) сбоку, а также переключает элемент изображения в соответствии с новым состоянием. Вот код 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 код:

image

Движок по умолчанию - Google, а альтернативный - DuckDuck Go. Когда я обновляю sh страницу, она всегда возвращается к поисковой системе по умолчанию (Google).

Как мне заставить ее запомнить переключенное состояние? Например: если я переключился на DuckDuck Go, в следующий раз, когда я открою страницу, текущая поисковая система должна быть Google. Вот предварительный просмотр .

1 Ответ

1 голос
/ 09 июля 2020

Вы можете использовать функцию localStorage браузеров, чтобы сохранить текущий предпочтительный движок.

Например, вы можете добавить в свой скрипт функцию document.onload, чтобы проверьте значение, сохраняющееся в браузере localStorage, и обновите lo go на панели поиска на основе сохраненного lo go. 

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 последним значением всякий раз, когда пользователь переключает предпочтительный lo go: 

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