Chrome扩充功能和本机储存空间 [英] Chrome extension and local storage
问题描述
我要建立Chrome扩充功能。对于该扩展，我需要一些动态创建的信息，但我想要添加的数据甚至更晚（在不同的页面）。
这是一些排序我希望始终可以访问的数据（插件运行时）：
var villages = new Array（）;
villageages [0] [0] =village1;
villageages [0] [1] =1325848;
villageages [1] [0] =village2;
villages [1] [1] =8744351;
villageages [2] [0] =village3;
villages [2] [1] =8952187;
如您所见，数组是多维的。这是因为我想一起存储名称[0]和村庄id 1 。 / p>
有人知道处理这个问题的好方法吗？
我看过这个： jQuery Cookie
但不知道如果这是一个正确的方法来处理这个问题。
或者，我必须创建一些包含所有值的XML文件吗？
UPDATE：
这是一个骨架示例，如果你只想存储village.id和village.name ，只是更改默认数据，仍然可以工作。
我改变了所有的代码，你会看到如何迭代数组，并获取下面代码的村庄数据。
b
$ b
首先，我应该说，在多维数组中保存数据真是不好的做法。
你应该使用对象，
以下是您的情况的示例对象，
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，//如果要设置新的默认数据，必须更新dataVersion。
villages：[]
};
//默认数据
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（）;
}）;
}
函数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
} else {
ExtensionData = r [ExtensionDataName];
callback（）;
}
}）;
}
函数DB_save（callback）{
DB_setValue（ExtensionDataName，ExtensionData，function（）{
if（callback）callback（）;
} ）;
}
函数DB_clear（callback）{
chrome.storage.local.remove（ExtensionDataName，function（）{
if（callback）callback b $ b}）;
}
function isEmpty（obj）{
for（var prop in obj）{
if（obj.hasOwnProperty（prop））
return false ;
}
return true;
}
DB_load（function（）{
//您的主要代码将在此处
console.log（ExtensionData）;
console.log ExtensionData.villages）; //数组的村庄
console.log（ExtensionData.villages [0]）; //第一个村庄对象
console.log（ExtensionData.villages [0] .id）; / / first village id
console.log（ExtensionData.villages [0] .name）; //第一个村庄名称
//如何迭代村庄
（扩展数据.villages [i] .id）; //村id = b $ b console.log（扩展数据。 villages [i] .name）; // village name
}
}）;
问题：
- ExtensionDataName是否相同？
当您将数据保存到localstorage时，会使用ExtensionDataName作为名称，它只是一个您的数据收集的名称。因此，当然你可以改变它，做你想要的，由你决定。
- 当您更改此行的数量时：
dataVersion：3，//如果要设置新的默认数据，必须更新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和重新加载新数据to localstorage
因此，如果您不更改此行，
ExtensionData.villages.push（
{id：1325848，name：village1}，
{id：8744351，name：village2}，
{id：8952187，name：village3}
）;
比你不会更改 dataVersion
I'm trying to make a Chrome extension. For that extension, I need some info that is dynamically created, but I want that data to be added even later on (on a different page).
This is some sort of data that i want to be always accessible (when the plugin runs):
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";
As you can see, the array is multi-dimensional. This because I want to store the names [0] and the village id 1 together.
Does anybody knows a good way of handling this problem?
I've looked at this: jQuery Cookie
But don't know if that is a proper way of handling the problem.
Alternatively do I have to create some kind of XML file that will contain all the values?
UPDATE:
This is a skeleton example, if you want to store just village.id and village.name, just change the default data, that still works. I have changed all code for you, you will see how to iterate array and get villages data below code.
At first I should say that It's really bad practice to save data in a multidimensional array.
You should use object, it makes your data tidy, than you can manipulate it easily.
Here is an example object for your situation,
var village = {
id: "1325848",
name : "village1"
};
console.log(village.id); //1325848
console.log(village.name); //village1
This was a basic get started example.
Here is the solution for your problem with localstorage and 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
}
});
QUESTIONS:
- Does the ExtensionDataName to be the same? or can i change that?
ExtensionDataName is used as a name when your data is saved to localstorage, it's just a name of your data collection. Therefore of course you can change it, do what you want, it's up to you.
- what is the goal that you achief when you change the number of this line:
dataVersion: 3, //if you want to set a new default data, you must update "dataVersion"?
At the first time when user run this extension there is no data in the localstorage. So default village list is used,
In my example default village list is,
[
{id: "1325848", name: "village1"},
{id: "8744351", name: "village2"},
{id: "8952187", name: "village3"}
]
this default list is saved to localstorage. After than when extension runs again(not first time), the default list is not important anymore, because there is a village list stored in localstorage, so it loads village list from localstorage.
For example if you want to add a new village during the runtime of extension you can do it like this,
ExtensionData.villages.push({id: "1215555", name: "village4"});
DB_save();
So what is the goal of dataVersion?
If you look DB_load() function, it's used there. It checks whether dataVersion is still same, If it's not same, It decides that
"There is a updated default data so I should clear localstorage and reload new data to localstorage"
So If you don't change this lines,
ExtensionData.villages.push(
{id: "1325848", name: "village1"},
{id: "8744351", name: "village2"},
{id: "8952187", name: "village3"}
);
Than you won't change dataVersion
这篇关于Chrome扩充功能和本机储存空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
