Question

我目前正在开发Chrome扩展程序，并使用Chrome存储空间API（chrome.storage.sync.set）来保存我的数据，但我遇到了一个让它运行的问题。

问题是，一旦我保存了一个条目并希望保存另一个条目，之前的条目将被删除。

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操作？

Answer 1

这是你可以在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，可以重写append函数以使用任何键：

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.");
           }
        });
   });
}

如何使用Chrome扩展程序存储API执行CRUD操作？

1 个答案: