Unique Scenario
- A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly.
Next, the
togglevariable is set to0, the background image changes again, and the data is removed from local storage: this step also works as expected....
However, when a user clicks on another element (causing the previous data to be deleted), new data should be inserted. Why does this not happen?
JSON Data:
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"
}
Snapshot for all data removed upon clicking a specific 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;
// Checking if there is any data in local storage
if (localStorage.getItem('eventData') === null) {
eventData = [];
}else{
// Parsing 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;
// Adding the new data to 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);
delete value.sess_id;
delete value.name;
delete value.city;
delete value.country;
delete value.event_url;
});
toggle = 1;
}
var jsondata=localStorage.setItem('eventData', JSON.stringify(eventData));
console.log(jsondata);
}