如何在选项页面保存到localStorage并将其放入后台页面？ [英] How to save to localStorage in options page and get it in background page?

问题描述

我仍然试图将 options.html 中输入的用户电子邮件保存到 extension_user 变量中c $ c> background.html 建议在这个答案中。我希望有人可以帮助。

在选项页面中，我有一个textarea id =getEmail并将输入的电子邮件保存到 localStorage ：

  //保存输入gmail地址
 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 = localStorage.getItem（user）
 //localStorage.clear（）
 console.log（if（！user）： +用户）
 // ... 
 //运行正常程序
 // ... 
} 
 else 
 {
 chrome .tabs.create（{url：/options.html}）; 
 console.log（作为新选项卡打开的选项页面）; 
} 
  

会发生什么情况是仅当我重新加载后台页面才会看到保存的用户在我将电子邮件保存到选项页面后的扩展名。

我错过了什么？

使用消息传递并将保存在选项中的用户电子邮件直接发送到后台页面会更好吗？我很感激任何建议，将本用户电子邮件永久保存在后台页面中，无论是否使用localStorage。谢谢！

通过serg的回答进行更新

background.html

 函数refreshUser（）
 {
 user = localStorage.getItem（user） ; 
 console.log（refreshUser函数内的用户+用户）; 
} 
 
 user = localStorage.getItem（user）; 
 if（！user）
 {
 refreshUser（）; 
 //用户未在refreshUser（）之外定义
 console.log（refreshUser函数之外的用户+用户）; 
 //运行其余代码
 // ... 
} 
 else 
 {
 user = localStorage.getItem（user） ; 
 console.log（this is the else close）
 //运行其余代码
 // ... 
 
} 
  

更新
$ b

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

  newUser = localStorage.getItem（user）; 
 console.log（first newUser+ newUser）; 
 // newUser = null 
 
函数refreshUser（）
 {
 newUser = localStorage.getItem（user）; 
 console.log（refreshUser函数内的newUser+ newUser）; 
 // newUser更新为保存在localStorage中的电子邮件
} 
 $ b console.log（refreshUser（）newUser之后的新用户）; 
 // newUser = null 
  

更新

按照serg的回答，这是有效的：

 函数refreshUser（）
 {
 newUser = localStorage.getItem（user）; 
} 
 
 ... 
 
 formData.append（extension_user，newUser）; 
  

解决方案

后台页面在浏览器启动时加载并保持全部加载时间。当你将用户保存到选项页面时，后台页面并不知道localstorage值已经改变，所以你需要通知它。

方法在用户更新后的背景页面中：

  //选项
 localStorage.setItem（user，user） ; 
 chrome.extension.getBackgroundPage（）。refreshUser（）; 
 
 bg页面
函数refreshUser（）{
 // localStorage中的用户被更新，读取它
} 
  

I am still trying to save a user email entered in options.html to the extension_user variable in background.html as suggested in this answer. I hope someone can help.

In options page I have a textarea id="getEmail" that takes the user email and saves the entered email to 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)

Now I want to pick up this email in background.html and save it as "extension_user". In background.html I have

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");
}

What happens is that background page sees the saved "user" only if I reload the extension after I saved the email in options page.

What am I missing?

And is it better to use message passing and send the user email saved in options directly to background page? I appreciate any suggestions to save this user email in background page permanently with or without localStorage. Thanks!

UPDATE by serg's answer

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
    //...

}

UPDATE

@serg I updated the code as follows but I still see that newUser is updated inside the function refreshUser() but it is null outside the function. What am I doing wrong?

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

Update

Following serg's answer, this works:

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

...

formData.append("extension_user", newUser);

解决方案

Background page gets loaded when browser starts and remains loaded all the time. When you saved user inside options page, background page doesn't know that localstorage value has changed, so you need to notify it somehow.

The easiest approach would be calling some method inside background page once user is updated:

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

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

这篇关于如何在选项页面保存到localStorage并将其放入后台页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！