jQuery 从 localStorage 中删除项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19287973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing items from the localStorage
提问by Lucky
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.
我正在尝试从 localStorage 中删除单个项目。我正在使用 localStorage 在列表视图中存储选定的列表项。我附加了用于从本地存储中删除所选项目的复选框。但是当我删除选定的复选框时，它不会像我选择一个复选框那样正确删除，它删除的两个或三个项目正在从 localStorage 中删除。
Html code:
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>
My Js code:
我的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"> <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');
});
}
回答by Vinay Pratap Singh
回答by ncm
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]==1so you are pointing to localStorage.key(1)
并checked==[Object]==1因此您指向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)
为了解决这个问题，你可以使用key=localStorage.key(some);localStorage.removeItem(key);，localStorage.removeItem(some);但重要的部分是你应该为每个复选框匹配“索引（第一种方式）”或“键值（第二种方式）”，如果我有完整的，我可以帮助你代码（我认为仍然有一些 HTML 或相关代码的部分）（如果你把你的代码放在一起也会很好）
回答by Bidstrup
Just use localStorage.clear();
只需使用 localStorage.clear();
回答by Roy M J
localstorage.removeItem()wont work as expected. I had faced the same problem while trying to handle the localstorage items.
localstorage.removeItem()不会按预期工作。我在尝试处理本地存储项目时遇到了同样的问题。
A work-around for this problem was to set the local storage item to null.It served my purpose.
解决此问题的方法是set the local storage item to null. 它达到了我的目的。
For example if you have a localStorage item named testthen to clear the item use :
例如，如果您有一个名为 localStorage 的项目，则要test清除该项目，请使用：
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.
虽然这可能不是正确的方法，但我已经在这个问题上发疯了，上面的方法达到了我的目的。
