如何在选项页面保存到localStorage并在后台页面获取？

Question

我仍在尝试将 options.html 中输入的用户电子邮件保存到 background.html 中的 extension_user 变量，如建议的在此答案中。我希望有人能提供帮助。

在选项页面中，我有一个文本区域 id="getEmail"，它获取用户电子邮件并将输入的电子邮件保存到 localStorage：

//save entered gmail address
document.getElementById("save").addEventListener(
    "click", function ()
    {
        var user = document.getElementById("getEmail").value;
        localStorage.setItem("user", user);
        console.log("gmail id saved as " + user);
    } , false)

现在我想在 中获取此电子邮件>background.html 并将其保存为“extension_user”。在 background.html 中，我

if (localStorage.getItem("user"))
{
    user = localStorage.getItem("user")
    //localStorage.clear()
    console.log("if(!user): " + user)
    //...    
    // run normal program
    //...
}
else
{
    chrome.tabs.create({url: "/options.html"});
    console.log("options page opened as new tab");
}

发生的情况是，仅当我在选项页面中保存电子邮件后重新加载扩展程序时，后台页面才会看到保存的“用户”。

我缺少什么？

使用消息传递将选项中保存的用户电子邮件直接发送到后台页面是不是更好？我感谢任何有关将此用户电子邮件永久保存在后台页面（无论是否使用本地存储）的建议。谢谢！

更新由serg的回答

background.html

function refreshUser ()
{
    user = localStorage.getItem("user");
    console.log("user inside of refreshUser function " + user);
}

user = localStorage.getItem("user");
if (!user)
{
    refreshUser(); 
    //user is not defined outside refreshUser()
    console.log("user outside of refreshUser function" + user);
    //run the rest of code here
    //...
}
else
{
    user = localStorage.getItem("user"); 
    console.log("this is the else close")
    //run the rest of code here
    //...

}

更新

@serg 我更新了代码如下，但我仍然看到newUser在函数 refreshUser() 内部更新，但在函数外部为 null。我做错了什么？

newUser = localStorage.getItem("user");
console.log("first newUser " + newUser);
//newUser=null

function refreshUser() 
{
    newUser = localStorage.getItem("user");
    console.log("newUser inside of refreshUser function " + newUser);
    //newUser is updated with saved email in localStorage
}

console.log("newUser after refreshUser() " + newUser);
//newUser=null

更新

按照serg的回答，这有效：

function refreshUser () 
{
    newUser = localStorage.getItem("user");
}

...

formData.append("extension_user", newUser);

Answer 1

浏览器启动时加载后台页面，并始终保持加载状态。当您在选项页面中保存用户时，后台页面不知道本地存储值已更改，因此您需要以某种方式通知它。

最简单的方法是在用户更新后调用后台页面内的某些方法：

//options
localStorage.setItem("user", user);
chrome.extension.getBackgroundPage().refreshUser();

//bg page
function refreshUser() {
    //user in localStorage is updated, read it
}