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

Posted 2023-03-05

【中文标题】如何根据分配给当前单击元素的数据从 localStorage 中删除 JSON 对象？

【英文标题】：How do I delete a JSON object from localStorage, according to data assigned to currently clicked element?

【发布时间】：2015-06-01 14:41:54

【问题描述】：

场景

用户单击一个元素，该元素的图像背景已更改，分配给该元素的数据（onclick 属性）被插入到 localStorage：这部分工作正常。

现在toggle 变量设置为0，背景图像已更改，数据正在从本地存储中删除：这部分工作正常。

...

用户点击另一个元素（第一次点击数据被删除 prev div ）。虽然在这种情况下应该插入新数据，但它没有？

json 数据：

 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 上删除的所有数据）：-

html：

<div class="evt_date"  style="overflow:hidden" style="overflow:hidden" itemscope itemtype="http://schema.org/Event">                             
    <a href="javascript:void(0);"  class="favourate_dextop" id="fav'.$data[$k]['id'].'"  onClick=" favaorite('.$data[$k]['id'].',\''.$name_event.'\',\''.$event_city.'\',\''.$event_country.'\',\''.$event_urls.'\',this)"></a>
</div>

Javascript：

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

Fiddle

【问题讨论】：

你能用纯js试试吗？它可能会以某种方式强制缓存。或者强制刷新：将目标复制到节点中，然后使用新的 bg 将节点读取到 dom

我无法挖掘问题

***.com/questions/17886578/refresh-part-of-page-div - 显示元素（不是页面）的基本刷新

【参考方案1】：

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

eventData = [];

虽然这仅在您的数据是对象时才有效：eventData = ;

接下来是这样的：

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 中的每个对象一个 key，以便以后可以识别它。它可以是具有指定元素的任何独特且可识别（“可匹配”）的东西。我将其设置为当前单击元素的id 属性，例如：fav1:name :'blah', ..., fav2:..., ...

HTML：

<a href="#" class="favourate_dextop" id="fav'.$data[$k]['id'].'"
    data-sess_id="'.$data[$k]['id'].'"
    data-name="'.$name_event.'"
    data-city="'.$event_city.'"
    data-country="'.$event_country.'" 
    data-event_url="'.$event_urls.'" >
</a>

jQuery:

$(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 替换图像背景：

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

JSFiddle

【讨论】：

当我点击星形图像时出现错误没有改变其背景图像，（平板三星，android 手机）.. 并且在刷新工作后我无法挖掘问题。

@user4041461 我真的找不到可能导致您的问题的原因。我刚刚在我拥有的每台设备上检查过它，它运行良好。您使用的是什么浏览器（和发布版本）？它也不适用于我的 JSFiddle 示例？

与 jsfiddle 显示的问题完全相同，出现在 android mobile 中。

不，mozziila、chrome、saafri 以及.. 切换图像都不起作用

但是你想要什么修改？就像我之前写的 - 这是:hover 效果问题。悬停在移动设备上毫无意义（ios 似乎以某种方式处理，但 android 不会），您必须处理不同屏幕尺寸的 @media 查询断点以在小屏幕上禁用 :hover（我以前的 JSFiddle 在评论）或移动检测（一些 jquery 插件可能会有所帮助），请参阅这个 SO 问题：***.com/questions/8291517/…。 没有真正万无一失的方法可以摆脱这个问题，所以我不能简单地为你修复它。