chrome.storage.sync.remove array doesn't work

Question

I am making a small Chrome extension. I would like to use chrome.storage but I can't get it to delete multiple items (array) from storage. Single item removal works.

function clearNotes(symbol)
{
    var toRemove = "{";

    chrome.storage.sync.get(function(Items) {
        $.each(Items, function(index, value) {
            toRemove += "'" + index + "',";         
        });
        if (toRemove.charAt(toRemove.length - 1) == ",") {
            toRemove = toRemove.slice(0,- 1);
        }
        toRemove = "}";
        alert(toRemove);
    });

    chrome.storage.sync.remove(toRemove, function(Items) {
        alert("removed");
        chrome.storage.sync.get( function(Items) {
            $.each(Items, function(index, value) {
                alert(index);           
            });
        });
    });
}; 

Nothing seems to break but the last loop that alerts out what is in the storage still shows all the values I am trying to delete.

Answer 1

When you pass in a string to sync.remove, Chrome will attempt to remove the one single item whose key matches the input string. If you need to remove multiple items, use an array of key values.

Also, you should move your remove call to inside your get callback.

function clearNotes(symbol)
{
// CHANGE: array, not a string
var toRemove = [];

chrome.storage.sync.get( function(Items) {
    $.each(Items, function(index, value)
    {
        // CHANGE: add key to array
        toRemove.push(index);         
    });

    alert(toRemove);

    // CHANGE: now inside callback
    chrome.storage.sync.remove(toRemove, function(Items) {
        alert("removed");

        chrome.storage.sync.get( function(Items) {
            $.each(Items, function(index, value)
            {
                alert(index);           
            });
        });
    }); 
});

};