Chrome擴展程序和本地存儲

Question

我在嘗試製作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文件？

Answer 1

UPDATE：

這是一個骨架例如，如果你想存儲只是village.id和village.name，只需更改默認的數據，目前仍然可以工作。 我已經改變了你的所有代碼，你會看到如何迭代數組並獲取代碼下面的村莊數據。

---

起初我應該說，這是非常糟糕的做法將數據保存在一個多維數組。

您應該使用對象，它使您的數據整齊，比您可以輕鬆操作它。

這裏是您的情況爲例對象，

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

問題：

• 是否ExtensionDataName是一樣的嗎？或者我可以改變它？

ExtensionDataName用作將數據保存到localstorage時的名稱，它只是數據集合的名稱。因此，你當然可以改變它，做你想做的，這取決於你。

• 是什麼，當你改變這一行的數量，你achief目標： dataVersion: 3, //if you want to set a new default data, you must update "dataVersion"？

在用戶第一次運行此擴展時，本地存儲中沒有數據。因此使用默認村名單，

在我的例子默認村名單，

[ 
    {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的」

所以，如果你不」 T改變這一行，

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

比你都不會改變dataVersion