Dojo Div Toggle View после обновления страницы

Question

У меня есть 2 divs, которые должны быть скрыты и видимы, когда я нажимаю на изображение. Я сделал это с помощью комбинации dojo и javascript. По умолчанию, при первом загрузке страницы, 2 divs будут спрятаны. После этого, если я нажму на изображение, div будут видны. Вот моя проблема: когда я нажимаю на любую вкладку на этой странице, общая страница будет обновлена, а div становятся невидимыми. Я хочу, чтобы эти 2 DIV должны быть видны даже после обновления страницы или перемещая на вкладку другой на той же странице до тех пор, пока я не нажать на изображение

Вот мой код:

<script type="text/javascript"> 
    function toggleDivs(){ 
    console.info("info message"); 
    if(dojo.style(dojo.byId('foo'), "display") == "block"){ 
     dojo.style(dojo.byId('foo'), "display", "none"); 
     dojo.style(dojo.byId('foo1'), "display", "none"); 
    } else { 
     dojo.style(dojo.byId('foo'), "display", "block"); 
     dojo.style(dojo.byId('foo1'), "display", "block"); 
    } 
} 
</script> 

<div class="wpthemeRight" id="foo1" style="display: none"> 
</div> 
<div class="wpthemeBanner" id="foo" style="display: none"> 
</div> 
<div id="ibm-tools" style="display: block;" aria-label="Ibm tools" class=""> 
<a href="#" onclick="toggleDivs();"><img src="./images/gear.jpg"></a> 
</div> 

Пожалуйста, помогите мне как это сделать. Спасибо, Advance !!!!

Я попытался с сохранением состояния Div в LocalStorage но не повезло

Вот код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script> 
<script type="text/javascript"> 
    function checkDivState(){ 
     localStorage["#foo1"] = true; 
     f(localStorage["#foo1"] = true) 
     { 
      dojo.style(dojo.byId('foo'), "display", "block"); 
      dojo.style(dojo.byId('foo1'), "display", "block"); 
     } 
     } 
     else 
     { 
      dojo.style(dojo.byId('foo'), "display", "none"); 
      dojo.style(dojo.byId('foo1'), "display", "none"); 
     } 
    } 
    </script> 

И в теле,

Answer 1

Вы можете сохранить div в локальном хранилище. например, если вы хотите сохранить состояние div foo1.

localStorage["#foo1"] = true; 

на странице загрузки вы можете проверить, если LocalStorage [ «# foo1»] верно, а затем сделать DIV видимым.

(Вы можете просмотреть LocalStorage в хроме -> инструменты F12 (Developer) -> Ресурсы -> Local Storage)

---

Ваша функция checkDivState неправильно, потому что LocalStorage [ "# foo1"] будет ВСЕГДА правда. Позвольте исправить это.

<script type="text/javascript"> 
function toggleDivs(){ 
    console.info("info message"); 
    if(dojo.style(dojo.byId('foo'), "display") == "block"){ 
     localStorage["#foo1"] = false; 
     dojo.style(dojo.byId('foo'), "display", "none"); 
     dojo.style(dojo.byId('foo1'), "display", "none"); 
    } 
    else { 
     dojo.style(dojo.byId('foo'), "display", "block"); 
     dojo.style(dojo.byId('foo1'), "display", "block"); 
     localStorage["#foo1"] = true; 
    } 
} 

function checkDivState(){  
    f(localStorage["#foo1"] = true) 
    { 
     dojo.style(dojo.byId('foo'), "display", "block"); 
     dojo.style(dojo.byId('foo1'), "display", "block"); 
    } 
    } 
    else 
    { 
     dojo.style(dojo.byId('foo'), "display", "none"); 
     dojo.style(dojo.byId('foo1'), "display", "none"); 
    } 
} 

и вызвать checkDivState на документ готов. Может быть, это помогает