How do I delete a JSON object from localStorage, according to data assigned to currently clicked element?
情景
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:
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 数组:
虽然只有当你的数据是一个对象时才有效: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事件没有触发。我该如何解决这个问题。
-
让我们在聊天中继续这个讨论。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/268805.html