webextensions：如何獲取存儲長度並遍歷對象

我需要使用本地存儲將對象存儲在webextensions中。一個簡單的代碼如下所示（我有title和content固定字符串在這裏，但我可能需要得到它們作爲輸入）。webextensions：如何獲取存儲長度並遍歷對象

將對象插入本地存儲後，我需要動態地在HTML表格的最後一行的HTML頁面中顯示它。要做到這一點，我需要表長度（可以實現）和存儲長度（我無法實現）訪問存儲在存儲中的最後一個對象，獲取它的值，將它們插入到最後一行HTML表格。

我面臨兩個問題。由於我沒有處理存儲中的數組，因此我不知道如何獲取存儲項目的長度以及如何訪問最後添加的項目和任何項目（即使用索引編號訪問數組）。我正在重寫和SDK代碼到webextension。所以，我曾經將物品作爲一組物品存儲在存儲器中。我真的無法在webextension中做到這一點，需要你的幫助。我更喜歡用最小的變化來重寫它，除非我做的是錯誤的事情。我正在做的是檢索存儲器中的最後一個項目，並在HTML表格中創建新行並添加它，並將項目存儲在存儲器中並顯示在HTML表格中。

在控制檯中，當我在控制檯中登錄rows時，我只看到單詞object。如何逐個訪問對象以獲取其屬性以在HTML頁面中顯示它們？

請您澄清一下嗎？

1）index.js

function insertRow() 
{ 
    var title = "XYZ" //I'm using fixed value but this is can be multiple objects read from the user whenever he inserts a new objects. 
    var content = "X"; 
    storeRow(title,content); 
}//end insertRow 

    //--------------------------------------------- 
function onError(error) { 
    console.log(`Error: ${error}`); 
} 
//---------------------------------------------- 
function onGot(rows){ 
    console.log("onGot: "+rows.length); //row.length - does not work 
} 
//------------------------------------- 
function storeRow(title,content) 
{ 
    var rows = {}; //define object 
    rows.title = title; 
    rows.content = content; 

    var storingRow = browser.storage.local.set(rows); //insert the object to the storage. 
    console.log("row inserted"); 
    storingRow.then(() => { 
    displayRow(rows); 
    }, onError); 
}//end storeRow 
//-------------------------------------- 

function displayRow(rows) 
{ 
    let gettingItem = browser.storage.local.get(); 
    gettingItem.then(onGot, onError); 
}//end displayRow

2）manifest.json：

{ 
    "manifest_version": 2, 
    "name": "test", 
    "version": "1.0", 

"background": { 
    "scripts": ["index.js"] 
    }, 

    "permissions":[ 
     "activeTab", 
     "storage" 
    ], 

}

UPDATE： 具體而言，在SDK中，我使用這樣做是爲了定義一個存儲陣列：

if(!info.storage.myStorage) 
{ 
    info.storage.myStorage = []; //declare a new storage. 
}//end if

然後，推動它上面的對象。 var myObject = {}; //定義對象。

myObject.title = "cccc"; 
myObject.content="zzzz"; 
info.storage.myStorage.push(myObject);

然後，我可以從HTML頁面edit，update和delete存儲項目基礎上，row id。這個想法是，在項目被存儲在存儲器中之後，它被顯示在HTML頁面中。例如，我在每行中都有鏈接，例如edit，並且當用戶點擊它時，我從edit按鈕（按行編號）的id標識存儲陣列index。但是，在webextensions中，我沒有數組，並且當用戶單擊edit時，我需要用row數字標識存儲元素。你有什麼想法如何做到這一點？如果沒有辦法，有什麼選擇？

來源

2017-06-18 user6875880

你在做什麼看起來像是你每次存儲一行都覆蓋相同的數據'title'和'content'。爲什麼僅僅選擇一個關鍵字名稱是個問題，你可以在'storage.local'中使用它來將你的數組存儲爲一個數組？如果您希望每次使用'.push（）'或'pop（）'等方法來存儲它，那麼只需定義函數來執行此操作，或者在調用這些方法時創建一個新對象。 – Makyen

你是指每個對象的關鍵？我不能選擇一個鍵，因爲'title'和'content'是從表單中讀取並作爲用戶的輸入。在這個簡單的例子中，我不會手動輸入這些值。那麼每次用戶輸入值如何分配自動鍵？我想要的是用戶可以輸入任何數量的「標題」和「內容」。我想編輯，刪除，更新這些值。編輯，刪除和更新是按鈕，並具有點擊事件。當它們被點擊時，我需要引用與它們對應的存儲中的行/索引或鍵。 – user6875880

所有我編輯，刪除或更新按鈕時所點擊的是行索引（取自按鈕的ID），然後我參考它的存儲並更新或刪除。沒有數組我就無法做到這一點。或者，我需要更多的說明和示例，說明如何在沒有數組的情況下完成此任務。 – user6875880

首先將數組存儲在本地存儲中而不是每一行中，然後將每一行存儲在存儲在本地存儲中的數組中。

browser.storage.local.get("rows") 
.then((rows => 
{ 
    var row = {}; 
    row.title = title; 
    row.content = content; 
    rows.push(row); 

    return browser.storage.local.set("rows", rows); 
})) 
.then(() => console.log("row inserted")) 
.then(() => browser.storage.local.get("rows")) 
.then(displayRows);

來源

2017-06-30 02:15:33 erikvold

webextensions：如何獲取存儲長度並遍歷對象

回答

相關問題