如何有效地存储/检索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调用存储多个对象,但你应该明白这一点.实现这一点的一个好方法可能是在每次用户找到想要添加的颜色时添加一个空数组,然后定期扩展可以将数据推送到同步.

一旦完成大量测试并且同步存储混乱,请跟踪开发过程中使用的密钥,并记住运行批量数据删除.它看起来像这样:

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