关于 javascript：如何根据分配给当前单击元素的数据从 localStorage 中删除 JSON 对象？

How do I delete a JSON object from localStorage, according to data assigned to currently clicked element?

情景

用户单击一个元素，该元素的图像背景已更改，并且分配给该元素的数据(onclick 属性)被插入到 localStorage：这部分工作正常。
现在 toggle 变量设置为 0，背景图像已更改，数据正在从本地存储中删除：这部分工作正常。
...
用户点击另一个元素(第一次点击数据被删除 prev div )。虽然在这种情况下应该插入一个新数据，但它没有？

json 数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Object {
sess_id : 182104,
name :"AUTOMECH FORMULA",
city :"Cairo",
country :"Egypt",
event_url :"automech-formula"
}

events:189 Object {
sess_id : 182104,
name :"AUTOMECH FORMULA",
city :"Cairo",
country :"Egypt",
event_url :"automech-formula"
}

快照(针对点击的特定 div 上删除的所有数据)：-

enter

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

小提琴

相关讨论

主要问题是你试图 JSON.stringify 一个普通的 javascript 数组：

1	eventData = [];

虽然只有当你的数据是一个对象时才有效：eventData = {};

接下来是这样的：

1
2
3
4
5

delete value.sess_id;
delete value.name;
delete value.city;
delete value.country;
delete value.event_url;

使用上述方法，您实际上是在清空对象而不是删除它。因此，您的新数据如下所示： {}{}{}{}{}... (表示许多空的匿名对象)。要删除对象，首先您必须知道要删除哪个对象( (*) 参见下一部分)

我的建议/解决方案：

我将删除 onclick 属性并改用 jQuery\\ 的 .click() 事件处理程序。
我会将所有数据保存在 data 属性中 - 这样您可以非常轻松地将与元素关联的数据作为对象(无需进一步处理)。
检查 toggle 状态是不必要的，因为它会在每次点击时自然切换。您应该只检查对象的存在并相应地删除/插入它。对于图像本身，使用 .toggleClass() 并使用适当的图像背景设置 CSS 类(而不是以编程方式替换它)。
(*) 我会给 localStorage 中的每个对象一个键，以便以后可以识别它。它可以是任何具有指定元素的独特且可识别的("可匹配")。我会将其设置为当前单击元素的 id 属性，例如：fav1:{name :'blah', ...}, fav2:{...}, ...

HTML:

1
2
3
4
5
6

jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$(document).ready(function(){

// declare an empty object (not array):
var eventData = {};
// check localStorage first after the page is ready (not on click):
if (localStorage.getItem('eventData') !== null) {
// if there's any faved link in the localstorage, highlight it:
$.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
$('#'+id).addClass('faved');
});
}

// instead of 'onclick' attribute, use jQuery .click() event handler:
$('.favourate_dextop').click(function(e){
// prevent default link click (instead of using"javascript:void(0);" in a href attribute):
e.preventDefault();
// check if the link"id" attribute (this.id) exists in the object:
if (eventData[this.id] !== undefined) {
// if so, delete it:
delete eventData[this.id];
}else{
// if not, add it:
// the .data() method gets all 'data' attributes of the element (as an objct)
eventData[this.id] = $(this).data();
}
// toggle '.faved' class:
$(this).toggleClass('faved');
// update localstorage:
localStorage.setItem('eventData', JSON.stringify(eventData));
});
});

在你的 CSS 中添加一个 .faved 类，而不是用 jQuery:

替换图像背景

1
2
3

.favourate_dextop.faved, .favourate_dextop:hover{
background:url('http://im.gifbt.com/images/star1_phonehover.png') no-repeat;
}

JSFiddle