¿Por qué el almacenamiento local Guardar pasado después de Javascript

Question

Im actualmente tratando de salvar el tab.url en HTML5 de almacenamiento local cuando se carga el programa a continuación, actualizar un archivo CSS en el encabezado basado en una regla, que son fáciles de hacer. Pero por alguna razón el popup.html carga la variable de almacenamiento local sino la anterior reciente.

Me preguntaba si alguien me puede ayudar en esto, el código que estoy usando es la siguiente:

<script language="javascript">
var rule;
var links;
var search;

function loadcssfile(filename, filetype)
{ 
   if (filetype == "css")
   {   
       var fileref=document.createElement("link");
       fileref.setAttribute("rel", "stylesheet");
       fileref.setAttribute("type", "text/css");
       fileref.setAttribute("href", filename);
   }

   if (typeof fileref != "undefined")
   {   
       document.getElementsByTagName("head")[0].appendChild(fileref);
   }
}

function loaded()
{   
    chrome.tabs.getSelected(null,function(tab) 
    {   
        var temp;
        temp = tab.url;
        localStorage['tab'] = temp;
        console.log(temp);
    });

    links = localStorage['tab'];
    rule = localStorage['ok0'];
    search = links.indexOf(rule);

    if(search != -1)
    {   
        loadcssfile("./css/styles.css","css");
        loadcssfile("./button/styles2.css","css");
    }
    else
    { 
        // or load other css file 
    }
}

document.getElementById('datacontent').innerHTML = rule + "<br>" + links + "<br>" + search;


function createXMLHttpRequest()
{ 
    if (window.ActiveXObject)
    {   
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {   
        xmlHttp = new XMLHttpRequest();
    }
}

function createXMLHttpRequest2()
{  
    if (window.ActiveXObject)
    {   
        xmlHttp2 = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {   
        xmlHttp2 = new XMLHttpRequest();
    }
}

function handleStateChange1() 
{ 
   if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
   {   
       var data;
       data = xmlHttp.responseText;
       document.getElementById('container').innerHTML = data;
   }
}

function senddata(id)
{ 
   createXMLHttpRequest();
   xmlHttp.onreadystatechange = handleStateChange1;
   xmlHttp.open("GET", "http://weblinkchecker.forum-source.tk/crawler.php?link=" + links.replace('&','0123456789abcdef'), true);
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlHttp.send("&type=anythinghere&anothervar=datahere");
   document.getElementById(id).innerHTML = "Successful !";
}  

function handleStateChange2() 
{ 
   if(xmlHttp2.readyState == 4 && xmlHttp2.status == 200 ) 
   {   
       var data;
       data = xmlHttp2.responseText;
       document.getElementById('container2').innerHTML = data;
   }
}

function sendForLinks()
{ 
   createXMLHttpRequest2();
   xmlHttp2.onreadystatechange = handleStateChange2;
   xmlHttp2.open("GET", "http://weblinkchecker.forum-source.tk/links.php?link=" + links.replace('&','0123456789abcdef'), true);
   xmlHttp2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlHttp2.send("type=anythinghere&anothervar=datahere");
}

window.onload = function()
{ 
   loaded();
}

</script>

Como se puede ver su comprobador de un enlace web, hay un poco de CSS que no me subo, también hay una gran cantidad de PHP usando ajax pero nada de eso está teniendo un efecto en el código y también eliminan cualquier innerHtml funciones. Lo sentimos por tener un gran trozo de código.

Si alguien me podría decir por qué HTML5 almacenamiento local está ahorrando última sería una gran ayuda. Probé a cabo haciendo eco de datos y que sólo se da un vistazo a los datos antiguos y no reciente. Siento que chocó contra un muro de ladrillo con éste.

Answer 1

En primer lugar, el código es bastante difícil de leer, por favor, el trabajo en su estilo de codificación, por ejemplo:

1. Usar más de un 1 por espacio de guión
2. No coloque cosas en la misma línea con la apertura y cierre de llaves
3. Use espacios alrededor ==, != etc.

Esto hará que su código mucho más fácil de leer:)

Pero a su problema:

// this looks like a callback....
chrome.tabs.getSelected(null,function(tab) { 
    var temp;
    temp = tab.url;
    localStorage['tab'] = temp;
    console.log(temp);
});

// this will most likely get executed BEFORE the callback gets called
// therefore the values just hasn't been changed yet
links = localStorage['tab'];
rule = localStorage['ok0'];
search = links.indexOf(rule);

Lo más probable necesidad de mover el resto de la función loaded en la devolución de llamada.