如何使用Chrome擴展存儲API執行CRUD操作？

我目前正在使用Chrome擴展程序並使用Chrome存儲API（chrome.storage.sync.set）來保存我的數據，但我遇到了一個問題以使其正常工作。如何使用Chrome擴展存儲API執行CRUD操作？

問題是，一旦我保存了一個條目並且想保存另一個條目，那麼之前的條目將被刪除。

Popup.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <div id="data"></div> 
    <input type="text" id="text"></input> 
    <button id="set">Set</button> 
    <script src="popup.js"></script> 
</body> 
</html>`

popup.js

document.body.onload = function() { 
    chrome.storage.sync.get("data", function(items) { 
    if (!chrome.runtime.error) { 
     console.log(items); 
     document.getElementById("data").innerText = items.data; 
    } 
    }); 
} 

document.getElementById("set").onclick = function() { 
    var d = document.getElementById("text").value; 
    chrome.storage.sync.set({ "data" : d }, function() { 
    if (chrome.runtime.error) { 
     console.log("Runtime error."); 
    } 
    }); 
    window.close(); 
}

是否有存儲大量數據的不刪除以前的一種方式，是有可能對使用Chrome存儲API保存的數據執行CRUD操作？

來源

2017-06-17 Abiodun Adetona

您的代碼覆蓋以前保存的任何'數據'。如果要追加，請使用不同的密鑰名稱，或者只需首先從存儲中讀取值，然後附加，保存。 – wOxxOm

請參閱[文檔]（https://developer.chrome.com/extensions/storage#property-sync）：同步限制爲100kB，每個對象最大8kB。 – wOxxOm

我不明白你的意思。 –

這是你可以追加一個關鍵的chrome.storage值：

function storage_sync_append(val){ 
    // In get, {'data': []} sets the key value pair if it didn't exist; 
    // in this case the value is an empty Array 
    chrome.storage.sync.get({'data': []}, result => { 
     var temp = result.data; 
     temp.push(val); 
     chrome.storage.sync.set({ 'data': temp }, function() { 
      if (chrome.runtime.error) { 
      console.log("Runtime error."); 
      } 
     }); 
    }); 
}

在您的代碼：

document.getElementById("set").onclick = function() { 
    var d = document.getElementById("text").value; 
    storage_sync_append(d); 
    window.close(); 
}

順便說一句，如果你有一個以上的陣列存儲與chrome.storage，追加功能可以重寫，以使用任何鍵：

function storage_sync_append(key, data){ 
// 
    chrome.storage.sync.get({ [key] : []}, result => { 
     var temp 
     for(property in result) 
      if(property == key) 
       temp = result[property]; 

     temp.push(data); 
     chrome.storage.sync.set({ [key] : temp }, function() { 
      if (chrome.runtime.error) { 
      console.log("Runtime error."); 
      } 
     }); 
    }); 
}

來源

2017-06-18 14:50:21 kundrata

謝謝Kundrata。有用。 –

如何使用Chrome擴展存儲API執行CRUD操作？

回答

相關問題