我正在尝试制作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]和村庄1存储在一起。
有人知道处理这个问题的好方法吗?
我看过这个:jQuery Cookie
但不知道这是否是处理问题的正确方法。
或者,我是否必须创建某种包含所有值的XML文件?
答案 0 :(得分:10)
这是一个骨架示例,如果您只想存储village.id和village.name,只需更改默认数据即可。 我已经为您更改了所有代码,您将看到如何迭代数组并将村庄数据提供给代码。
首先,我应该说在多维数组中保存数据真的很糟糕。
你应该使用object,它使你的数据整洁,而不是你可以轻松操作它。
以下是适合您情况的示例对象,
var village = {
id: "1325848",
name : "village1"
};
console.log(village.id); //1325848
console.log(village.name); //village1
这是一个基本的入门示例。
以下是localstorage和javascript对象问题的解决方案。
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
}
});
当您的数据保存到localstorage时,ExtensionDataName用作名称,它只是数据集合的名称。因此,当然你可以改变它,做你想做的事,这取决于你。
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