ウェブエクステンション：ストレージの長さを取得してオブジェクトを反復する方法

Question

ローカル記憶域を使ってオブジェクトをwebextensionsに格納する必要があります。以下に簡単なコードを示します（私はtitleとcontentを固定文字列としてここに入力します）。

オブジェクトをローカルストレージに挿入した後、HTMLテーブルの最後の行のHTMLページにオブジェクトを動的に表示する必要があります。

これを行うには、ストレージに格納された最後のオブジェクトにアクセスするためにテーブルの長さ（達成できません）とストレージの長さ（実現できませんでした）が必要です。 HTMLテーブル。

私は2つの問題に直面しました。私はストレージの配列を扱っていないので、格納されたアイテムの長さを取得する方法と、最後に追加されたアイテムとアイテムにアクセスする方法（インデックス番号を使用して配列にアクセスするなど）はわかりません。私はwebextensionに書き直しています。そこで、アイテムをオブジェクトの配列としてストレージに格納していました。私は本当にwebextensionでこれを行うことはできませんでしたし、あなたの助けが必要です。私は本当に間違ったことをしない限り、最小限の変更で書き直すことを好む。私がやっていることは、ストレージ内の最後のアイテムを取得し、HTMLテーブルに新しい行を作成して追加することです。アイテムをストレージに保存してHTMLテーブルに表示します。

コンソールで、rowsをコンソールに記録すると、単語objectが表示されます。オブジェクトを1つずつアクセスしてプロパティを取得して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 = {}; //オブジェクトを定義します。 row idに基づい

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

その後、私はできedit、update、およびHTMLページからdeleteストレージ項目。アイデアは、アイテムがストレージに格納された後、HTMLページに表示されます。たとえば、editの各行にリンクがあり、ユーザーがクリックすると、editボタンのid（行番号）のストレージアレイindexが識別されます。しかし、Web拡張では配列がありません。ユーザーが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);