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

How to delete the individual item from the localStorage dynamically

提问by Lucky

I'm trying to delete the individual items from the localStorage using jquery. Here i'm adding the checkboxes to each and every item in the listivew for removing the seleted checkbox's items have to delete from localStorage but its not working correctly.

我正在尝试使用 jquery 从 localStorage 中删除单个项目。在这里，我将复选框添加到 listivew 中的每个项目，以删除必须从 localStorage 中删除的选中复选框项目，但它无法正常工作。

Updated Code:

更新代码：

$(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');
        });

});

} 

Thanks in Advance.

提前致谢。

回答by Rameez

Are you using boolean values as key? It won't work.

您是否使用布尔值作为键？它不会工作。

It should be :

它应该是 ：

localStorage.removeItem('keyName');

or

或者

delete window.localStorage["keyName"]

回答by brunouno

If you're thinking about the numerical key, here's something that seems to work.

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

var elems = -1;
var deleteElem;

Then loop through the local storage to find whatever element you're looking for (in this case, the first one):

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

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

Now that you've got the key you need, just remove it with:

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

localStorage.removeItem(deleteElem);