Chrome扩展程序和本地存储(Chrome extension and local storage

我试图做一个Chrome扩展。 这个扩展，我需要的是动态创建的一些信息，但我想是要添加数据，即使后来（在不同的页面）。

这是某种形式的数据，我想放在容易拿到的（插件运行时）：

var villages = new Array();
villages[0][0] = "village1"; 
villages[0][1] = "1325848"; 
villages[1][0] = "village2"; 
villages[1][1] = "8744351"; 
villages[2][0] = "village3"; 
villages[2][1] = "8952187"; 

正如你所看到的，数组是多维的。 这是因为我希望到[0]姓名及村庄ID存储1到一起。

有谁知道处理这个问题的好办法？

我看这个： jQuery的饼干

但不知道如果这是处理该问题的正确方法。

或者我必须建立某种XML文件将包含所有的值？

Answer 1:

更新：

这是一个骨架例如，如果你想存储只是village.id和village.name，只需更改默认的数据，目前仍然可以工作。 我已经改变了所有的代码，你将看到如何遍历数组，并得到下面的代码村庄的数据。

---

起初，我应该说，这是非常糟糕的做法将数据保存在一个多维数组。

您应该使用对象，它使您的数据整洁，比你可以很容易地操作它。

这里是您的情况为例对象，

var village = {
  id: "1325848", 
  name : "village1"
};

console.log(village.id); //1325848
console.log(village.name); //village1

这是一个基本的上手例子。

这里是你的问题的localStorage和JavaScript Object的解决方案。

var ExtensionDataName = "myfirstextensiondata";
var ExtensionData = {
  dataVersion: 3, //if you want to set a new default data, you must update "dataVersion".
  villages: []
};


//default data
ExtensionData.villages.push(
    {id: "1325848", name: "village1"},
    {id: "8744351", name: "village2"},
    {id: "8952187", name: "village3"}
);

function DB_setValue(name, value, callback) {
    var obj = {};
    obj[name] = value;
    console.log("Data Saved!");
    chrome.storage.local.set(obj, function() {
        if(callback) callback();
    });
}

function DB_load(callback) {
    chrome.storage.local.get(ExtensionDataName, function(r) {
        if (isEmpty(r[ExtensionDataName])) {
            DB_setValue(ExtensionDataName, ExtensionData, callback);
        } else if (r[ExtensionDataName].dataVersion != ExtensionData.dataVersion) {
            DB_setValue(ExtensionDataName, ExtensionData, callback);
        } else {
            ExtensionData = r[ExtensionDataName];
            callback();
        }
    });
}

function DB_save(callback) {
    DB_setValue(ExtensionDataName, ExtensionData, function() {
        if(callback) callback();
    });
}

function DB_clear(callback) {
    chrome.storage.local.remove(ExtensionDataName, function() {
        if(callback) callback();
    });
}

function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
}

DB_load(function() {
    //YOUR MAIN CODE WILL BE HERE
    console.log(ExtensionData);
    console.log(ExtensionData.villages); //array of villages
    console.log(ExtensionData.villages[0]); //first village object
    console.log(ExtensionData.villages[0].id); //first village id
    console.log(ExtensionData.villages[0].name); //first village name

    //HOW TO ITERATE VILLAGES

    for (var i = 0; i < ExtensionData.villages.length; i++) {
        console.log(ExtensionData.villages[i].id); //village id
        console.log(ExtensionData.villages[i].name); //village name
    } 
});

问题：

• 是否ExtensionDataName是一样的吗？ 或者我可以改变这种状况？

ExtensionDataName作为名字的时候你的数据被保存到本地存储，它只是一个数据集合的名称。 因此，当然你可以改变它，做你想做的，这完全取决于你。

• 什么是你achief的目标，当你改变这一行的数量： dataVersion: 3, //if you want to set a new default data, you must update "dataVersion" ？

在第一时间，当用户运行此扩展没有在localStorage的任何数据。 所以默认村名单时，

在我的例子默认村名单，

[
    {id: "1325848", name: "village1"},
    {id: "8744351", name: "village2"},
    {id: "8952187", name: "village3"}
]

此默认列表保存到localStorage的。 当扩展再次运行（不是第一次）比后，默认的列表并不重要了，因为存储在localStorage的一个村庄名单，所以它从localStorage的加载村名单。

例如，如果你想扩展的运行过程中添加一个新的村庄，你可以像这样做，

ExtensionData.villages.push({id: "1215555", name: "village4"});
DB_save();

那么，什么是目标dataVersion ？

如果你看看DB_load()函数，它的使用存在。 它检查dataVersion是否仍然是相同的，如果它不一样的，它决定，

“ 有一个更新的缺省数据，所以我应该清除的localStorage和重载新数据的localStorage”

所以，如果不改变这种线，

ExtensionData.villages.push(
    {id: "1325848", name: "village1"},
    {id: "8744351", name: "village2"},
    {id: "8952187", name: "village3"}
);

比你会不会改变dataVersion

文章来源: Chrome extension and local storage