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

HTML:

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

小提琴

  • 您可以尝试使用纯js吗?它可能会以某种方式强制缓存。或者强制刷新:复制一个节点中的目标,然后用新的 bg 将该节点读取到 dom
  • 我无法挖掘这个问题
  • stackoverflow.com/questions/17886578/refresh-part-of-page-di??v – 显示元素(不是页面)的基本刷新


主要问题是你试图 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

  • 当我单击星形图像时出现错误,它的背景图像没有改变,(平板电脑三星,android 手机).. 并且在刷新工作后我无法挖掘问题。
  • @user4041461 我真的找不到可能导致您的问题的原因。我刚刚在我拥有的每台设备上检查过它,它运行良好。您使用的是什么浏览器(和发布版本)?它也不适用于我的 JSFiddle 示例?
  • 与 jsfiddle 显示的问题完全相同的问题发生在 android mobile 中。
  • 不,它不工作 mozziila、chrome、saafri 以及.. 切换图像
  • 似乎 android 设备不喜欢 :hover CSS。您可能需要针对屏幕尺寸使用 @media 查询断点 jsfiddle.net/xxuhL555 是否有效? (我只为 1224 像素以上的屏幕设置了 CSS :hover)
  • 抱歉,我没有任何 Android 设备
  • 这对你有用吗? jsfiddle.net/7gaxaxfu(每次点击图片都会改变?)
  • 但是你想要什么修改?就像我之前写的 – 这是 :hover 效果问题。悬停在移动设备上毫无意义(IOS 似乎以某种方式处理,但 android 不会),您必须处理不同屏幕尺寸的 @media 查询断点以在小屏幕上禁用 :hover (我以前的 JSFiddle 在评论)或移动检测(一些 jquery 插件可能会有所帮助),请参阅这个 SO 问题:stackoverflow.com/questions/8291517/…。没有真正万无一失的方法可以摆脱这个问题,所以我不能简单地为你解决它。
  • 现在我有新问题 $(‘.favourate_dextop’).click(function(e) 在 html 加载浏览器为其分配类时起作用,现在在页面加载动态时出现问题(facebook 加载更多说)..in this click事件没有触发。我该如何解决这个问题。
  • 让我们在聊天中继续这个讨论。


来源:https://www.codenong.com/29314766/

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_9439.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?