在 JS 中从 chrome 扩展中保存和读取数据答案

【问题标题】：Saving and reading data from chrome extension in JS在 JS 中从 chrome 扩展中保存和读取数据
【发布时间】：2019-11-07 18:50:44
【问题描述】：

简单的任务。用户可以在 google chrome 扩展程序中输入他们的登录信息，单击按钮 - 登录，我应该将此登录信息保存到存储中。下一次，当用户打开扩展时，登录应该出现在输入中。用户可以通过输入新的登录结束单击按钮来更改它。问题是 getChanges 没有收到任何东西。

HTML：

<!doctype html>
<html>
    <head>      
        <script src="jquery.min.js" type="text/javascript"></script>
    </head>
    <body>      
        <input type="text" id="login" placeholder="login">
        <button id="doLogin">Login</button>          
        <script src="popup.js"></script>  
    </body>
</html>

popup.js：

document.getElementById("doLogin").addEventListener("click", doLogin);

var extratedLogin= getChanges('myLogin');
$('#login').val(extratedLogin);

function getChanges(name) {  
    chrome.storage.local.get(name, function(result) {
      console.log('myLogin= '+JSON.stringify(result));
      return result.key;
    });
}

function saveChanges(name,value) {   
    chrome.storage.local.set({name: value}, function() { 
        console.log('Settings saved for '+ name);
    });
}
function doLogin(){
    //do something
    saveChanges('myLogin', $('#login').val());
}

manifest.json：

"permissions": ["storage", ...]

【问题讨论】：

存储 API 是异步的，因此它不会返回任何内容。您应该在回调中使用 result.key 。它也应该是result[name]，而不是 result.key。更多信息：Returning Chrome storage API value without function
@wOxxOm 感谢您指出这一点。我已删除我的评论。
@wOxxOm 谢谢你的解释。我改为 getChanges('myLogin');和内部 chrome.storage.local.get - 设置输入值。但它也不起作用。我从 result[name] 收到“未定义”。
啊，那是因为你的saveChanges也不正确，应该使用{[name]: value}，更多信息：How to use a variable for a key in a JavaScript object literal?

标签： javascript google-chrome-extension storage google-chrome-storage

【解决方案1】：

错误是语法。这里是正确的保存和加载

window.onload = function() {
        chrome.storage.local.get(['mylogin'], function(items) {
            console.log('Settings retrieved ', items);
            $('#login').val(items['mylogin']); 
        });
    }      

    function doLogin(){          
        chrome.storage.local.set({'mylogin': $('#login').val()}, function() { 
            console.log('Fields data was saved.');
        });
    }

【讨论】：