Removing items from the localStorage

Question

I'm trying to remove the individual items from the localStorage. I'm using localStorage for storing selected list items in the listview. I attached the checkboxes for removing the selected items from the localstorage. But when I'm removing the selected checkboxes its not deleting properly like when I selected one checkbox its deleting two or three items are deleting from the localStorage.

Html code:

<!-- Favourites page -->
<div data-role="page" id="fav">
     <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" class="ulDiv">
    <ul data-role="listview" data-split-icon="minus" data-split-theme="d" data-filter="true"data-icon="false" data-filter-placeholder="Search" id="favoritesList">
            </ul>
    </div>
    <div data-role="footer" data-position="fixed" class="my-footer">
    </div>
</div>

My Js 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);
        }
        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');
        });
} 

Answer 1

Just use localStorage.clear();

Answer 2

I think the problem is in this part:

$("#delete").on('click', function() {
            var checked = $('#add #check:checkbox:checked');
            var url = localStorage.key(checked);
            localStorage.removeItem(url);
            $("#favoritesList").listview('refresh');
});

you are not using correct key for deleting and its because you are using :

var url = localStorage.key(checked);

and checked==[Object]==1 so you are pointing to localStorage.key(1)

---

for solving this problem you can both use key=localStorage.key(some);localStorage.removeItem(key); and localStorage.removeItem(some); but the important part is that you should match 'an index(first way)' or a 'key value(the second way)' for each checkbox and I can help you if I have the complete code (I think still there are some part of HTML or codes that are related)(also it would be so good if you put a fiddle of your codes)

Answer 3

localstorage.removeItem() wont work as expected. I had faced the same problem while trying to handle the localstorage items.

A work-around for this problem was to set the local storage item to null. It served my purpose.

For example if you have a localStorage item named test then to clear the item use :

localStorage.setItem("test", "");

Although this may not be the correct way, i had gone bonkers over this issue and the above one served my purpose.

Answer 4

try removing items like this, removing local storage items by their key values

//syntax is localStorage.removeItem('keyName');
//so if your key name is checked                  
localStorage.removeItem('checked');

See this Link for reading about local storage.