如果页面已经打开，则 localStorage 不工作

Question

我创建了一个 Google Chrome 扩展程序，它从企业的详细信息页面获取业务信息，并在 [= 的帮助下使用企业地址获取城市、州和邮政编码27=] 的地理编码 API。我正在使用 localStorage 存储城市、州和 pin 的值，如下所示：

var city = "", state = "", pin = "";
var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+encodeURIComponent(laddress[1].replace(/<.*?>/g,'').replace('&amp;','&').trim())+"&sensor=false&key=AIzaSyCAQmrAKh0jzNVcT1VqTUhjB5Oh_dxl1zA";
console.log(url);
var xhr = new XMLHttpRequest();
var resp;
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "*/*");
xhr.onload = function () {
    var json = xhr.responseText;                         // Response
    json = json.replace(/^[^(]*\(([\S\s]+)\);?$/, ''); // Turn JSONP in JSON
    json = JSON.parse(json);  
    console.log(json.results[0].address_components);
    for(var i=0;i<json.results[0].address_components.length;i++){
        if(json.results[0].address_components[i].types[0]=="administrative_area_level_2")
            city = json.results[0].address_components[i].long_name;
        if(json.results[0].address_components[i].types[0]=="administrative_area_level_1")
            state = json.results[0].address_components[i].long_name;
        if(json.results[0].address_components[i].types[0]=="postal_code")
            pin = json.results[0].address_components[i].long_name;
    }
    localStorage.setItem("city", city);
    localStorage.setItem("state", state);
    localStorage.setItem("pin", pin);
}
xhr.send();
lcity = localStorage.getItem("city");
lstate = localStorage.getItem("state");
lpin = localStorage.getItem("pin");

当

出现问题

业务页面已经打开，我尝试点击扩展，localStorage 不起作用
有时不显示任何值，有时显示值。

在访问多个业务页面时，我应该怎么做才能在 localStorage 中获得完美的值？

Answer 1

我认为您使用了错误的 localStorage。虽然 localStorage 是根据 HTML5 定义的，但它需要像 wwww.something.com 这样的根上下文。

尝试使用 chrome.storage。

修改文档中的示例。让我们使用本地存储。

var city = "", state = "", pin = "";
var url = "https://maps.googleapis.com/maps/api/geocode/json?address="+encodeURIComponent(laddress[1].replace(/<.*?>/g,'').replace('&amp;','&').trim())+"&sensor=false&key=AIzaSyCAQmrAKh0jzNVcT1VqTUhjB5Oh_dxl1zA";
console.log(url);
var xhr = new XMLHttpRequest();
var resp;
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "*/*");
xhr.onload = function () {
    var json = xhr.responseText;     // Response
    json = json.replace(/^[^(]*\(([\S\s]+)\);?$/, ''); // Turn JSONP in JSON
    json = JSON.parse(json);  
    console.log(json.results[0].address_components);
    for(var i=0;i<json.results[0].address_components.length;i++){       
        if(json.results[0].address_components[i].types[0]=="administrative_area_level_2")
            city = json.results[0].address_components[i].long_name;
        if(json.results[0].address_components[i].types[0]=="administrative_area_level_1")
            state = json.results[0].address_components[i].long_name;
        if(json.results[0].address_components[i].types[0]=="postal_code")
            pin = json.results[0].address_components[i].long_name;
    }
    chrome.storage.local.set({“city”: city,
                    "state”: state,
                    "pin”: pin}, function(){
                    // Do stuff here after set.
                    chrome.storage.local.get(["city", "state", "pin",
                        function(items) {
                            lcity = items.city;
                            lstate = items.state;
                            lpin = items.pin;
                        }
                });
}
xhr.send();

请记得在清单中修改您的权限以使用存储空间。

要点： xhr.send() 是一个异步调用。之后立即设置 l* 变量是您有时会显示数据的问题。在卸载或 local.set 回调中处理。上面的例子在回调中有设置。

如果页面已经打开，则 localStorage 不工作

localStorage is not working if a page is already open

local-storage

google-chrome-extension