chrome.storageの追記保存の方法を教えて下さい

Question

こちらですと、上書き保存されてしまいますが、追記の方法はありますでしょうか。
chrome.storage.local.set({'hoge': hoge}, function () {
});

現在、拡張機能を制作しており、複数のタブで同時に同じ処理を行い、
それぞれのタブから、同じ'hoge'にデータを追記したいと考えております。

現在、既存のデータを読み込み、そこに追記して、再度保存という処理を行っているのですが、
当然、ロックなどもないので、保存できない場合が発生してしまい、使い物になりません。

追記の方法か、この様な場合のお勧めの方法を教えて下さい。

宜しくお願い致します。

Answer 1

hoge を配列で持つ。

chrome.storage.local.get('fruits', function ({ fruits }) {
  console.log(fruits); // ['apple']
  const newFruit = 'banana';

  const nextFruits = fruits.concat(newFruit); // -> ['apple', 'banana']

  chrome.storage.local.set({ fruits: nextFruits }, function() {
     /* noop */
  });
});

Comments

[worldtravel]

ありがとうございます。
早速、試して見ます。

chrome.storage.local.get({ hoge }, function() {
は、set では無くてでしょうか？

[og24715]

そのとおりです。

[worldtravel]

ありがとうございます。

[worldtravel]

すいません、確認させて下さい。
教えて頂いた書き方は、複数のタブで同時に同じ処理を実行しても問題無いでしょうか。

下記の様になってしまわないでしょうか。

1の処理の get
2の処理の get
2の処理の set
1の処理の set

や

1の処理の get
2の処理の get
1の処理の set
2の処理の set

など

[og24715]

おっしゃっていることがよくわかりません。

[worldtravel]

すいません。
排他制御を行えるようにしたいと考えており、
それが可能かどうか、です。

[og24715]

上の get-set はコールバック関数により同期的に処理されますが、異なるタブ間の処理は非同期で処理されます。もし複数のタブから同時に追加操作をしたい場合はそれらを操作をキューにして同期的に処理をするトランザクション処理を実装する必要があります。

[worldtravel]

ありがとうございます。
ちょっと調べてみます。

[og24715]

"promise キュー" などで調べるとよいと思います。
promiseキューについてわからなければまた質問すればよいですが、この質問のタイトルにはそぐわないので適切なタイトルで質問にすればより詳しい方が回答してくれると思います。

[worldtravel]

わかりました。
ご丁寧に、ありがとうございました。