亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在不覆蓋其他寫入操作的情況下將記錄添加到 chrome.storage.local

如何在不覆蓋其他寫入操作的情況下將記錄添加到 chrome.storage.local

慕的地6264312 2022-10-13 16:55:41
我正在創建一個 Chrome 擴展來測量某些類型的標簽活動。因此,我通過 chrome.tabs 創建了各種事件偵聽器,用于偵聽 onReplaced、onUpdated、onCreated 和其他事件。這些偵聽器中的每一個都需要存儲數據,我正在使用 Storage API (chrome.storage.local) 來做到這一點。然而,存儲 API 是基于回調的,正如其規范中所定義的那樣。chrome.storage.local.get(key, myCallbackFunctionHere);發生的情況是我在幾乎同時觸發的各種事件偵聽器中對存儲進行了多次調用。因此,您對存儲 API 有兩個不同get的調用,然后set調用存儲一些數據。兩組數據都需要存儲,但它們會相互覆蓋,最終只有一組數據被存儲。chrome.tabs.onCreated.addListener(onTabCreated);chrome.tabs.onUpdated.addListener(onTabUpdated);function onTabUpdated(tabId, changeInfo, tabAsUpdated) {  var someRelevantData = // extract some data to be stored   chrome.storage.sync.get({'myKey' : {}}, function (data) {     var myDictionaryUpdated = data.myKey;    myDictionaryUpdated ['newKey'] = someRelevantData;    chrome.storage.sync.set({'myKey' : myDictionaryUpdated }, function() {       console.log("myKey updated --- new value is &s", JSON.stringify(myDictionaryUpdated, null, 4));    });  });}function onTabActivated(activeInfo) {   var someDifferentAndEquallyImportantData = // extract some data to be stored   chrome.storage.sync.get({'myKey' : {}}, function (data) {     var myDictionaryUpdated = data.myKey;    myDictionaryUpdated['aSecondNewKey'] = someDifferentAndEquallyImportantData;    chrome.storage.sync.set({'myKey' : myDictionaryUpdated }, function() {       console.log("myKey updated --- new value is &s", JSON.stringify(myDictionaryUpdated , null, 4));    });  });}onTabUpdated 的回調返回使用“myKey”存儲的對象,然后添加到它并在存儲中更新它。但是,onTabActivated 也會在 'myKey' 處獲取對象(它仍然是空的,因為來自上一個回調的 set 調用尚未運行),添加自己的數據,然后將更新的對象寫入存儲,覆蓋任何數據包含在 onTabUpdated 回調中。我在其他任何地方都找不到存儲 API 的良好文檔或答案 - Stack Overflow 上的相關問題不涉及多個事件偵聽器在彼此之后立即調用存儲 API。
查看完整描述

1 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

這是任何異步存儲的標準問題,并非特定于擴展。


解決方案 1. 使用同步window.localStorage. 它只能存儲字符串,因此您需要 JSON.stringify 和 JSON.parse 來處理復雜數據。性能方面,假設數據小于幾千字節,則沒有區別,但如果有更多,則不要使用此方法。


解決方案 2. 使用等待上一次調用完成的互斥讀/寫函數:


const storage = (() => {

  let mutex = Promise.resolve();

  const API = chrome.storage.sync;

  const mutexExec = (method, data) => {

    mutex = Promise.resolve(mutex)

      .then(() => method(data))

      .then(result => {

        mutex = null;

        return result;

      });

    return mutex;

  };

  const syncGet = data => new Promise(resolve => API.get(data, resolve));

  const syncSet = data => new Promise(resolve => API.set(data, resolve));

  return {

    read: data => mutexExec(syncGet, data),

    write: data => mutexExec(syncSet, data),

  };

})();

用法:


async function example() {

  const {myKey} = await storage.read({myKey: {}}); 

  myKey.foo = 'bar';

  await storage.write({myKey});

}

解決方案 3:使用存儲鍵值對的變量將緩存添加到先前的解決方案,但這是對讀者的練習(周圍可能有現有的庫/示例)。


查看完整回答
反對 回復 2022-10-13
  • 1 回答
  • 0 關注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號