google-chrome-extension - 如何有效地从chrome.storage.sync存储数据/从chrome.storage.sync检索数据？

Question

因此，我正在编写一个扩展程序，使人们可以从网络上找到的图像中细化并保存颜色。一切顺利，但现在我正在尝试概念化如何实际存储它们并列出存储的项目。

据我所知，chrome.storage.sync()仅允许对象。这意味着我必须做这样的事情:

{colors: [{colorName: 'white', colorHex: '#ffffff'}, {colorName: 'black', colorHex: '#000000'}]}

这似乎效率很低，因为每次我想从收藏夹列表中增加或减少一种颜色时，我都需要获取整个数组，更改所需的一项，然后将数组存储回来。更不用说扫描阵列中的颜色以查看其是否存在，这在大型阵列上可能非常耗费时间。

最终，我希望能够按照以下方式做点事情

 colors['#fff'].name = white;

但是，这似乎是不可能的。

我很想听听其他一些想法，以了解实现此目标的最佳方法是什么。

Answer 1

Javascript的优点在于，所有内容都可以轻松地视为对象。函数，数组甚至变量都可以作为对象进行访问。

您可以创建一个像这样的数组，

var colors {}
colors["#FFF"] = "white";
colors["#000"] = "black";

或者也许使用空函数数组，

function color(name, hex /* ... other properties */ ) { }

var colors {
    color1: color("white", "#FFF");
    color2: color("black", "#000");
}

然后可以通过以下方式访问这些颜色

color1.name

或者

color1.hex

虽然，因为您应该为存储中的每个对象使用特定的“键”值，但这也许是一种更好的方法。

例如，

function save_color() {
    var white = "#FFF";
                             //key    value   callback
    chrome.storage.sync.set({"white": white}, function() {
        console.log("The value stored was: " + white);
    });
}

或者，对于多种颜色

function save_colors() {
    var white = "#FFF";
    var black = "#000";

    chrome.storage.sync.set([{"white": white}, {"black": black}], function() {
        console.log("The values stored are: " + white + " and " + black);
    });
}

我认为这可能可行，我之前没有尝试使用一个api调用存储多个对象，但是您应该明白这一点。实现此目的的一种好方法可能是让用户每次发现要添加的颜色时都会添加一个空数组，然后扩展名会定期将数据推送到同步状态。

一旦完成了大量测试并且您的同步存储困惑不堪，请跟踪在开发过程中使用的 key ，并记住运行批处理数据删除。它看起来像这样:

function clear_data() {
    var keys = { "white", "black" };
    chrome.storage.sync.remove(keys, function() {
        for(var i = 0; i < keys.length; i++)
            console.log("Removed Data for Key: " + key[i]);
    });
}

顺便说一句，要检索同步存储的值，

function load_color() {
    var color = "white";
                           //key   callback
    chrome.storage.sync.get(color, function(val) {
        console.log("The value returned was: " + val);
    });
}