Question

我正在撰写Chrome扩展程序，我需要在chrome.storage.local中保存数据。但是，它只保存了最后的记录数据。你能解释一下我做错了什么吗？

普通的localStorage很糟糕，因为在Chrome浏览器中重置设置后，localStorage为空。

chrome.runtime.onMessage.addListener(function (request) {
    if (request.type === 'setInLocalStorage') {
        var key = request.key;
        //alert(key);

        chrome.storage.local.set({key: request.data},function () {
            alert('data was saved');
        });

    }
    return true;
});
chrome.runtime.onMessage.addListener(function (request, sender, SendResponse) {
    if (request.type === 'getFromStorage') {
        chrome.storage.local.get(null, function (items) {
            var allKeys = Object.keys(items);
            if (allKeys.length != 0) {
                for (var i = 0; i < allKeys.length; i++) {
                    alert(items[allKeys[i]]);
                    if (items[allKeys[i]] === request.value) {
                        SendResponse(true);
                    } else if (i === allKeys.length - 1) {
                        SendResponse(false);
                    }
                }
            } else {
                SendResponse(false);
            }
        });
    }
    return true;
});

Answer 1

你的问题在这里：

var key = request.key;
//alert(key);

chrome.storage.local.set({key: request.data},function () {
    alert('data was saved');
});

使用符号{key: value}创建对象时，键始终为“key”，而不是名为key的任何变量的值。

您可以通过以下方式完成此操作：

var data={};
data[request.key]=request.data;
chrome.storage.local.set(data,function () {
    alert('data was saved');
});

或者，更接近当前代码，使用方括号（在该位置[]未定义数组，是将键定义为给定变量的值的有效表示法）：

var key = request.key;
//alert(key);

chrome.storage.local.set({[key]: request.data},function () {
    alert('data was saved');
});

Answer 2

storage.local中仅存在最近保存的值，因为您反复将所有值存储到属性'key'中，每次调用chrome.storage.local.set()时都会覆盖该值。基本上，您没有创建您认为是chrome.storage.local.set()号召唤的对象。

您使用Object literal/Object initializer作为：

{key: request.data}

这相当于：

{'key': request.data}

它不会替换变量key的值。因此，每次尝试保存时，都会将数据存储在属性'key'中，而不是您在消息中传递的密钥（即request.key）。

您可以直接在已使用的对象初始值设定项中使用computed property name：

{[key]: request.data}

这导致变量key的内容被用作要赋值request.data的属性。

哪会使您的代码成为：

chrome.runtime.onMessage.addListener(function (request) {
    if (request.type === 'setInLocalStorage') {
        var key = request.key;
        //alert(key);

        chrome.storage.local.set({[key]: request.data},function () { //only this line changes
            alert('data was saved');
        });
    }
    return true;
});

或者，您可以通过首先创建对象然后设置属性来执行相同的操作，但更加冗长：

chrome.runtime.onMessage.addListener(function (request) {
    if (request.type === 'setInLocalStorage') {
        var setObject = {};
        setObject[request.key] = request.data;
        //alert(key);

        chrome.storage.local.set(setObject,function () {
            alert('data was saved');
        });
    }
    return true;
});

为什么chrome.storage.local只保存最后一条记录？

2 个答案: