如何动态地从localStorage中删除单个项目

Question

我想使用jQuery从localStorage中删除单个项目。在这里，我为每个列表项添加复选框以删除所选复选框的项目，但它没有正常工作。 更新的代码:

$(document).ready( function() {
    $("#section_list").on('click', 'a', function() {
                var item = $(this).find('h2').text();
                var desc = $(this).find('p').text();
                var html = '<p></br><p class="description">' + desc + '</p>';
                $('.addToFavoritesDiv').click(function() {
                    var url = $(location).attr('href');
                    if (!supportLocalStorage())
                    {
                        item = 'No support';
                    }
                    else
                    {
                        try
                            {
                                localStorage.setItem('autosave' + url, item + html);

                            }
                        catch (e)
                            {
                                if (e == QUOTA_EXCEEDED_ERR)
                                {
                                    alert('Quota Exceeded');
                                }
                            }   
                    }
                });
    });

    $('#fav').click(function() {
        fromStorage();
        $("#favoritesList").listview('refresh');
    }); 

    $(document).on('click', '#edit', function() {
        fromGetStorage();
    });
});

function supportLocalStorage()
{       
    return typeof(Storage) !== 'undefined';
}

function fromStorage()
{
    $("#favoritesList").empty();
    $("#favoritesList").listview('refresh');
    for (var i = 0; i < localStorage.length; i++) {
        var url = localStorage.key(i);
            var item = localStorage.getItem(url);
            $("#favoritesList").append('<li id="add"><a href="' + url + '" style="text-decoration:none;color:black">' + item  + '</a></li>').attr('url', url);
    }
    $("#favoritesList").listview('refresh');
}

function fromGetStorage() 
    {   
     $("#favoritesList").empty();  
     $("#favoritesList").append('<input type="checkbox" name="all" id="select" />Select all</br>');
     $("#fav .ui-listview-filter").remove();
        for (var i = 0; i < localStorage.length; i++) {
        var url = localStorage.key(i);
         var item = localStorage.getItem(url);
          $("#favoritesList").append('<li id="add"><div><input type="checkbox" name="check" id="check">&nbsp;<a href="' + url + '" style="text-decoration:none;color:black">' + item + '</a></div></li>').attr('url', url);
        $("#favoritesList").listview('refresh');
 }

$("#select").click(function(event){
    event.stopPropagation();
});
    $('#select').change(function() {
    if($("#select").is(':checked')) {
        $("#add #check").prop("checked", true);
        $('#empty').on('click', function() {
            localStorage.clear();
        $("#favoritesList").listview('refresh');
        });
    }
    else {
        $("#add #check").prop("checked", false);
    }
 });


$("#add #check").click(function(event){
    event.stopPropagation();
});

    $("#add #check").change(function() {
        var chkLength = $('input[name="check"]:checkbox').length;
        var chkdLength = $('input[name="check"]:checkbox:checked').length;
        if (chkLength == chkdLength)
        {
            $('#select').prop('checked', true);
            $('#empty').on('click', function() {
                localStorage.clear();
                $("#favoritesList").listview('refresh');
            });
        }
        else 
        {
            $('#select').prop('checked', false);
        }
        $("#delete").on('click', function() {
                var checked = $('#add #check:checkbox:checked');
                    var url = localStorage.key(checked);
                    localStorage.removeItem(url);
                    $("#favoritesList").listview('refresh');
            $("#favoritesList").listview('refresh');
        });

});

} 

提前感谢。

- Lucky

---

你能找到解决方法吗？我也遇到了同样的问题，无法从收藏夹列表视图中删除特定记录。 - John Blanchard

Answer 1

你是否将布尔值用作键？这是行不通的。

应该是：

localStorage.removeItem('keyName');

或者

delete window.localStorage["keyName"]

- Rameez

---

我正在尝试从存储在本地存储中的ListView中删除已选中的列表项。 - Lucky

你在本地存储中存储对象吗？我认为我们只能存储字符串值。不如只存储ID，并通过它们的ID删除项目。 - Rameez

是的，我正在使用localstorage存储收藏页面。我可以使用“localStorage.clear()”删除localstorage中的所有数据，但我无法删除单个项目。 - Lucky

你能分享一下保存数据的方法吗？ - Rameez

Answer 2

如果您在考虑数字键，这里有一个似乎有效的方法。

var elems = -1;
var deleteElem;

然后遍历本地存储以查找您要查找的任何元素（在本例中是第一个元素）：

$.each( localStorage, function( key,value ){
    elems++;
    // define which element to delete
    if(elems == 0){ deleteElem = key }
});

现在您已经拥有所需的密钥，只需使用以下命令将其删除：

localStorage.removeItem(deleteElem);

- brunouno