webextensions：如何获取存储长度并迭代对象

Question

我需要使用本地存储将对象存储在 webextensions 中。下面显示了一个简单的代码（我这里有 title 和 content 作为固定字符串，但我可能需要将它们作为输入）。

将对象插入到本地存储后，我需要在 HTML table 最后一行的 HTML 页面中动态显示它。

为此，我需要 table 长度（可以实现）和存储长度（我无法实现）来访问存储中存储的最后一个对象，获取其值，将它们插入最后一行HTMLtable。

我遇到了两个问题。由于我不处理存储中的数组，我不知道如何获取存储项目的长度以及如何访问最后添加的项目和任何项目（即喜欢使用索引号访问数组）。我正在重写 SDK 代码到 webextension。因此，我曾经将项目作为对象数组存储在存储中。我真的不能在 webextension 中做到这一点，需要你的帮助。我更喜欢用最少的改动重写它，除非我做错了什么。我正在做的是检索存储中的最后一项并在 HTML table 中创建新行并添加它，然后我将项目存储在存储中并显示在 HTML table.

在控制台中，当我在控制台中记录 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"
    ],

}

更新： 具体来说，在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);

然后，我可以在row id的基础上edit、update和delete存储HTML页面的项目。思路是，item存入storage后，显示在HTML页面。例如，我在每一行中都有 edit 的链接，当用户单击它时，我从 edit 按钮的 id 中识别存储阵列 index（编号按行）。但是，在 webextensions 中，我没有数组，当用户单击 edit 时，我需要通过 row 数字来识别存储元素。你知道怎么做吗？如果不行，还有什么选择？

Answer 1

首先在本地存储中存储一个数组而不是每一行，然后将每一行存储在本地存储中存储的数组中。

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

webextensions：如何获取存储长度并迭代对象

webextensions: How to get storage length and iterate over the objects

firefox

firefox-addon

firefox-addon-webextensions