Chrome extension and local storage

Question

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?

Answer 1

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