更改緩存如果語言發生了變化

Question

我有方法誰填充菜單，它是這樣的：

function MenuPopulate(url, listname, target) { 
    var lang = "Espanol"; 
    if ((window.location.href.indexOf("lang=en") > 0)) { 
     lang = "English"; 
    } 


     $(function() { 
        $.ajax({      
         url: "https://myapi.company.com/api/myapi/getmenu?idioma=" + lang , 
         async: false, 
         type: 'GET', 
         dataType: "json", 
         success: function (data) { 
          console.log(data); 
          completeMenu(data, target) 
          //localStorage.setItem('data', JSON.stringify(data))             
          }, 
         error: function (response) { 
          failureMenu(response, target) 
         } 
        }); 

       }); 

}  

function completeMenu(data, target) { 
    var prefix = "<ul class='nav navbar-nav navbar-right'>"; 
    var sufix = "</ul>"; 
    var items = data; 
    var menu = ""; 
    for (item in items) { 
     if(items[item].Titile == "JOIN US" ){ 

     menu += "<li><a href='#mymodal' data-toggle='modal' data-target='#mymodal'>" + items[item].Titile + "</a></li><li class='divider-vertical'></li>" 
     } 
     else if(items[item].Titile == "CONTACT US"){ 
     menu += "<li><a href='#mymodal2' data-toggle='modal' data-target='#mymodal2'>" + items[item].Titile + "</a></li><li class='divider-vertical'></li>" 
     } 

     else{ 
      menu += "<li><a href=" + items[item].Enlace + ">" + items[item].Titile + "</a></li><li class='divider-vertical'></li>"; 
     } 
    } 
    $(target).html(prefix + menu + sufix); 
} 

function failureMenu(data, target) { 
    console.log(data); 
    $(target).text("Ocurrió un error en la carga del menú. Por favor revise la consola para más información"); 
} 

而且它完美運行，除了加載頁面的時間，所以現在我存儲方法與localStorage的緩存，因此我做了這個類：

$(document).ready(function() { 


    GetGlobal(); 

}); 

    function GetGlobal() { 


     var lang = "Espanol"; 
     if ((window.location.href.indexOf("lang=en") > 0)) { 
      lang = "English"; 

     } 

     var page = window.location.pathname.replace("/SitePages/", ""); 

     if (localStorage.getItem("Menu") == null) { 
      $.ajax({ 
       url: "https://myapi.company.com/api/myapi/getglobalresources?idioma=" + lang + "&pagina=" + page, 
       async: false, 
       type: 'GET', 
       dataType: "json", 
       success: function(data) { 
        CompleteGlobal(data); 
        //alert("Cargo con exito"); 
       }, 
       error: function(data) { 
        //failureGlobal(data); 
        alert("No cargo"); 
       } 
      }) 
     } else { 
      // alert("la cookie esta cargada"); 
      CargaGlobal(); 

      //localStorage.getItem("Menu") 
     } 
    } 


    function CargaMenu() { 
     $.ajax({ 
      url: "https://myapi.company.com/api/myapi/getmenu?idioma=" + lang, 
      async: false, 
      cache:true, 
      type: 'GET', 
      dataType: "json", 
      success: function(data) { 
       console.log(data); 
       completeMenu(data, target) 
      }, 
      error: function(response) { 
       failureMenu(response, target) 
      } 
     }); 
    } 


    function CompleteGlobal(data) { 

     data.Menu //lista de menus 
     data.Pie // lista pie de pagina 
     data.Mapa 
     data.Ligas 

     localStorage.setItem("Menu", JSON.stringify(data.Menu)); 
     localStorage.setItem("Pie", JSON.stringify(data.Pie)); 
     localStorage.setItem("Mapa", JSON.stringify(data.Mapa)); 
     localStorage.setItem("Ligas", JSON.stringify(data.Ligas)); 
     localStorage.setItem("Enlace", JSON.stringify(data.Enlace)); 


     CargaGlobal(); 



    } 



    function CargaGlobal() { 

     completeMenu(JSON.parse(localStorage.getItem("Menu")), "#BarraNavegacion"); 

     completeSiteMap(JSON.parse(localStorage.getItem("Mapa")), "#MapaSitio"); 

     completeImgLinks(JSON.parse(localStorage.getItem("Enlace")), "#EnlacesImagen"); 

     completeFooter(JSON.parse(localStorage.getItem("Pie")), "#Footer"); 




    } 




    function completeBanner3(target) { 
     var items = localStorage.getItem("Menu"); 
     var menu = ""; 
     for (var item in items) { 
      menu += "<div class='col-md-4 text-center'><div><a href='" + items[item].Enlace + "'><img src='" + items[item].Imagen + "' class='img-responsive img-center' /></a></div><div class='t02 text-center'>" + items[item].Titulo + "</div><div class='t03 text-center'>" + items[item].Descripcion + "</div></div>"; 
     } 
     $(target).html(menu); 
    } 

但是，當我改變我的網站，它只是空載其他語言菜單的語言，我想，如果語言是不同的，以「獵犬」，所以我覺得我可以做再次加載餅乾像

if (localStorage.getItem("Menu") == null && lang == "Espanol") { 
       $.ajax({ 
        url: "https://myapi.company.com/api/myapi/getglobalresources?idioma=" + lang + "&pagina=" + page, 
        async: false, 
        type: 'GET', 
        dataType: "json", 
        success: function(data) { 
         CompleteGlobal(data); 
         //alert("Cargo con exito"); 
        }else if(localStorage.getItem("Menu") == null && lang == "English"){ 
     $.ajax({ 
        url: "https://myapi.company.com/api/myapi/getglobalresources?idioma=" + lang + "&pagina=" + page, 
        async: false, 
        type: 'GET', 
        dataType: "json", 
        success: function(data) { 
         CompleteGlobal(data); 
}, 
        error: function(data) { 
         alert("No cargo"); 
        } 
       }) 
      } else { 
       CargaGlobal(); 
      } 
     } 

但它不起作用，任何想法我需要在這種情況下做什麼？問候

Answer 1

而不是將個別部分保存到localStorage，有時更容易只通過使用JSON.parse和JSON.stringify來獲取和獲取對象。

這是一個相當長的例子，但我試圖讓它更容易遵循。這是各種概念的說明，因此它不能完全解決您的問題，但我相信它會讓您更接近解決方案。

編輯：StackOverflow腳本運行器不喜歡localStorage。這裏有一個的jsfiddle看到它在行動：https://jsfiddle.net/subterrane/9prr5ks6/

編輯，編輯：另外，我不會說西班牙語，所以指責谷歌翻譯的傻菜單按鈕標籤。

var lang = "Espanol"; 
if ((window.location.href.indexOf("lang=en") > 0)) { 
    lang = "English"; 
} 

// function to getMenuData 
function getMenuData() { 
    // get the saved data from localStorage 
    var menuData = JSON.parse(localStorage.getItem('menuData')); 

    // if it doesn't exist, or if our language is missing, fetch the data from the server 
    if (menuData == null || menuData[lang] == null) { 
    // this is a stub function. Pretend it's doing an ajax request 
    // the second argument here is a callback function. It would be 
    // the ajax success function. 
    fetchMenuData(lang, function(data) { 
     // if we did have some of the data, use it, or start with an empty object 
     menuData = menuData || {}; 
     // set the server response to the menuData object 
     menuData[lang] = data; 
     // stringify the object and stash it in localStorage 
     localStorage.setItem('menuData', JSON.stringify(menuData)); 
     // display the menu 
     displayMenu(menuData); 
    }); 
    } else { 
    // we go the data from the cache, so display the menu 
    displayMenu(menuData); 
    } 
} 

// this is a fake function that pretends to get menuData from a server 
function fetchMenuData(lang, callback) { 
    // wait 2 seconds, then call the response function 
    setTimeout(response, 2000); 

    // response function sends some data back to the callback depending on the requested language 
    function response() { 
    callback(lang == "Espanol" ? [{ 
     name: 'Casa', 
     link: 'something.html' 
    }, { 
     name: 'Lejos', 
     link: 'somethingelse.html' 
    }] : [{ 
     name: 'Home', 
     link: 'something.html' 
    }, { 
     name: 'Away', 
     link: 'somethingelse.html' 
    }]); 
    } 
} 

// function to display the menu 
function displayMenu(data) { 
    // update the text in some of the buttons 
    document.getElementById('home').innerHTML = data[lang][0].name; 
    document.getElementById('away').innerHTML = data[lang][1].name; 
    // looks kinda funny, but this just puts the opposite of the current language 
    // on the button to make it feel like a toggle button 
    document.getElementById('toggle').innerHTML = lang == "Espanol" ? "English" : "Espanol"; 
    // show the menu now that it's filled in 
    document.getElementById('menu').classList.remove('hide'); 
} 

// set up a click handler on the language toggle button 
document.getElementById('toggle').addEventListener('click', function() { 
    // hide the menu while we mess with it. Could take a while to get the menu 
    // data back from our 'server' 
    document.getElementById('menu').classList.add('hide'); 
    // set the language to the opposite of whatever it was before 
    lang = lang == "Espanol" ? "English" : "Espanol"; 
    // get the menu data from the cache or server 
    getMenuData(); 
}); 

// kick it all off by getting the menu data from the server 
getMenuData(); 

.hide { 
    display: none; 
} 

<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" /> 
<div class="container"> 
    <div id="menu" class="hide"> 
    <button id="home"></button> 
    <button id="away"></button> 
    <button id="toggle"></button> 
    </div> 
</div>