如何使用chrome.storage.sync.remove从数组中删除一项？

Question

我正在构建一个Chrome浏览器扩展程序，其中包括一项允许用户保存网址的功能。 我使用chrome.storage.sync创建了此功能，但没有遇到任何问题。

但是，我还需要让用户删除他们已经保存的网址。 我创建了一个文本输入框，他们可以在其中输入要删除的单个网址（即“ www.url.com”）。 我想将此输入转换为字符串，并在用户按下按钮时使用它从Chrome存储中删除匹配的字符串。

我以为chrome.storage文档指定了chrome.storage.sync.remove可用于从存储的数组中删除字符串，但我无法使其正常工作。 这是我的代码：

function removeUrl() {
    var theUrl = document.getElementById('url-input').value;
    chrome.storage.sync.get(null, function(result, error) {

        // Checks if the array (urlList) exists:
        if ('urlList' in result) {
            var theList = result['urlList'];

            // Checks if the url that will be deleted is in the array:
            if (theList.includes(theUrl)) {
                chrome.storage.sync.remove(theUrl);
                chrome.runtime.reload();
            }
        }
        // Error handling goes here
    });
}

此代码不会引发任何错误，但也不会从数组中删除该url。

请注意，我一次只想删除1个网址，数组中没有重复的网址，并且我没有使用jQuery之类的任何库。 我究竟做错了什么？

Answer 1

您无法以这种方式执行此操作，因为chrome.storage是键值存储。

在您的特定示例中，您尝试从存储中删除数组的一个元素，但是存储仅包含带有数组的键。

最好的解决方案是从数组中删除该值， chrome.storage再次将数组设置为chrome.storage 。

var theList = result['urlList'];

// Checks if the url that will be deleted is in the array:
if (theList.includes(theUrl)) {

  // create a new array without url
  var newUrlList = arr.filter(function(item) { 
    return item !== theUrl;
  });

  // set new url list to the storage
  chrome.storage.sync.set({ 'urlList': newUrlList });
  chrome.runtime.reload();
}