草庐IT

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

codeneng 2023-03-28 原文

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

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'].'"
    data-sess_id="'.$data[$k]['id'].'"
    data-name="'.$name_event.'"
    data-city="'.$event_city.'"
    data-country="'.$event_country.'"
    data-event_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') no-repeat;
}

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事件没有触发。我该如何解决这个问题。
  • 让我们在聊天中继续这个讨论。

配给localStoragespanclassnbspcsshtmljavascriptjquerylocal-storage

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

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  8. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  9. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  10. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

随机推荐