关于 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

1
 

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
var image2 = ‘http://im.gifbt.com/images/star1_phonehover.png’;
var image1 = ‘http://im.gifbt.com/images/star1_phone.png’;
var toggle = 1;

function favaorite(sess_id,name,city,country,event_url,pointer){
    var eventData;
    //is anything in localstorage?
    if (localStorage.getItem(‘eventData’) === null) {
        eventData = [];
    }else{
        // Parse the serialized data back into an array of objects
        eventData = JSON.parse(localStorage.getItem(‘eventData’));
        console.log(eventData);  
    }
    var details={};
    details.sess_id   = sess_id;
    details.name      = name;
    details.city      = city;
    details.country   = country;
    details.event_url = event_url;

    // Push the new data (whether it be an object or anything else) onto the array
    eventData.push(details);

    if (toggle == 1){
        console.log("1");
        $(pointer).closest(‘.evt_date’).find(‘.favourate_dextop’).css(‘background-image’, ‘url("’ + image2 + ‘")’);
        toggle = 0;
    }else{
        console.log("2");
        $(pointer).closest(‘.evt_date’).find(‘.favourate_dextop’).css(‘background-image’, ‘url("’ + image1 + ‘")’);
        $.each(eventData, function(key, value){
            console.log(value);
            //$(‘#fav’+ delete value.sess_id + ”);
            //$(‘#fav’+ delete value.name + ”);
            //$(‘#fav’+ delete value.city + ”);
            //$(‘#fav’+ delete value.country + ”);
            //$(‘#fav’+ delete value.event_url + ”);
            delete value.sess_id;
            delete value.name;
            delete value.city;
            delete value.country;
            delete value.event_url;            
            //localStorage.removeItem(value.sess_id);

        });
        toggle = 1;
    }
    // Alert the array value
    // alert(eventData);  // Should be something like [Object array]
    // Re-serialize the array back into a string and store it in localStorage
    var jsondata=localStorage.setItem(‘eventData’, JSON.stringify(eventData));
    console.log(jsondata);
}

小提琴


主要问题是你试图 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
<a href="#" class="favourate_dextop" id="fav’.$data[$k][‘id’].’"
    datasess_id="’.$data[$k][‘id’].’"
    dataname="’.$name_event.’"
    datacity="’.$event_city.’"
    datacountry="’.$event_country.’"
    dataevent_url="’.$event_urls.’">

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’) norepeat;
}

JSFiddle


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/268805.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论