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：如何获取存储长度并遍历对象

回答

相关问题