chrome扩展中的数据存储和检索答案

【问题标题】：Data storage and retrieval in chrome extensionchrome扩展中的数据存储和检索
【发布时间】：2020-05-05 08:31:50
【问题描述】：

我正在构建一个需要使用数据存储的 chrome 扩展程序。扩展的操作如下：

该扩展程序会捕获任何 get 或 post 请求的 url
如果 URL 已作为键存在于存储键：值对中，则我检索该值并以某种方式在浏览器中显示它
如果 URL 不存在于存储中，则我调用一个 API，该 API 对 URL 执行一些操作并返回响应。然后我将 URL-响应对作为 key:value 存储在存储中。我这样做的原因是，下次出现相同的 URL 时我不必调用 API。那我就检查一下我的存储。

我编写了以下代码来设置存储中的值。

chrome.storage.sync.set({user_url: show_action}, function() {
    console.log('Key is ' + user_url);
    console.log('Value is set to ' + show_action);
});

user_url 变量具有从请求中捕获的 URL。 show_action 变量保存来自 API 调用的响应。我正在尝试使用以下代码检索值：

chrome.storage.sync.get([user_url], function(result) {
    console.log(result);
    console.log('Value currently is ' + result.user_url);
    if(result.user_url == null || result.user_url == undefined)
        call_api = true;
    else
        show_action = result.user_url;
});

这没有按预期工作。我得到一个空白的result，没有以user_url 作为键的键值对。虽然它必须在那里，因为我在检索之前设置了值。然后我尝试将user_url 作为字符串文字放在 get 调用中，如下所示：

chrome.storage.sync.get(["user_url"], function(result) {
    console.log(result);
    console.log('Value currently is ' + result.user_url);
});

完成后，控制台日志中的结果如下所示：

{user_url: true}
user_url: true
Value currently is true

因此，user_url 本身被设置为键而不是其中的值。我的问题是如何将 URL 设置为键，当我通过 URL 调用时，我得到所需的输出？还有当我通过 URL 调用但存储中不存在时如何处理这种情况？

【问题讨论】：

看起来你是modifying a variable inside an asynchronous callback（应该在回调中使用）并且错误地访问了variable object key（应该是result[user_url]）。
那我该怎么做才能得到结果呢？
我已经在我的评论和我链接的主题中指出应该包含更多示例。

标签： javascript google-chrome-extension

【解决方案1】：

看起来chrome.storage.sync.set({user_url: show_action}user_url 这一行上的那个不是自动翻译的，它被认为是你传递给chrome.storage.sync.set 的对象的键。

您可能希望这样做：

let data = {};
data[user_url] = show_action;

chrome.storage.sync.set(data, function() {
    console.log('Key is ' + user_url);
    console.log('Value is set to ' + show_action);
});

【讨论】：