logo标签列表

从localStorage中删除项目

jqueryhtmlcheckboxlocal-storage
5

我正在尝试从localStorage中删除单个项目。 我正在使用localStorage来存储列表视图中选定的列表项。 我附加了复选框以从localstorage中删除所选项目。 但是当我删除所选复选框时，它没有正确地删除，例如当我选择一个复选框时，有两个或三个项目从localStorage中删除。

Html代码：

<!-- 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>

我的JS代码：

 $(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');
        });
}
你正在删除本地存储中的所有数据，我想这就是原因... - Sina R.
@imsiso localStorage.clear(); 用于删除所有项目，它可以正常工作，但问题在于localStorage.removeItem();。 - Lucky
你的HTML在哪里？你设置本地存储的代码在哪里？ - Sina R.
@imsiso，我已经更新了关于本地存储和HTML的完整代码。 - Lucky
你尝试使用 "delete window.localStorage[YourKey]" 了吗？这对我起作用了。 - trainoasis
4个回答
15

试着像这样移除项目，通过它们的键值来移除本地存储项

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

请查看此链接了解有关本地存储的内容。

起初我以为这会是问题所在，但似乎这并不是真正删除键的方式。 - Jonast92
在Chrome和Safari中，它对我来说都很正常。请查看此Plunker并点击“更多”按钮，然后选择删除数据库，同时查看开发工具，您应该会看到“设置”数据库已被删除。PLUNKER - Post Impatica
2

我认为问题在这部分：

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

你没有使用正确的密钥来删除，原因是你使用了：

var url = localStorage.key(checked);

并且 checked==[Object]==1，所以你指向的是 localStorage.key(1)

为了解决这个问题，你可以使用 key=localStorage.key(some);localStorage.removeItem(key); 和 localStorage.removeItem(some); 两种方法，但重要的部分是你应该为每个复选框匹配“索引（第一种方式）”或“键值（第二种方式）”，如果我有完整的代码，我可以帮助你（我认为仍然有一些与HTML或代码相关的部分）（如果你把你的代码放在fiddle里面会更好）

那么，代替localStorage.key(checked)，我需要替换什么？ - Lucky
我不太清楚您是否想从本地存储中删除所选复选框的数据？ - Sina R.
有一个删除链接，当您单击它时，会从存储中删除所选复选框的数据，对吧？ - Sina R.
我可以制作一个 Fiddle，但问题在于数据... 我正在使用 XML 和 TXT 格式的数据... 对于这个制作 Fiddle 来说有些困难。 - Lucky
你看到我的更新回答了吗？你应该匹配一些内容并使用它来指向已存储在localStorage中的数据以删除它们。 - Sina R.
1
localstorage.removeItem()无法按预期工作。在尝试处理本地存储项时，我遇到了同样的问题。
解决此问题的方法是将本地存储项设置为null。它满足了我的需求。
例如，如果您有一个名为test的localStorage项目，则使用以下代码清除该项目：
localStorage.setItem("test", "");

虽然这可能不是正确的方法，但我已经对这个问题感到非常疯狂了，上面的方法对我有所帮助。

是的，我也遇到了这个问题很长一段时间了...还没有解决 :( - Lucky
@user2384323：你试过将状态设置为null吗？ - Roy M J
1
嗯，你最终解决了你遇到的根本问题吗？我注意到即使现在，IE对于某些用户帐户仍然无法工作，因为浏览器无法访问自己的localStorage文件，这似乎非常荒谬。 - Ringo
@Ringo：仍在摸索中... 尚未找到此特定问题的根本原因。 - Roy M J
1
我怀疑浏览器问题未得到充分记录，这些问题基于安全设置和其他偏好。 - Ringo
1
只需使用 localStorage.clear();。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接