How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Question

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

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 toggle variable is set to 0, 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);
}

Check out the Fiddle here

javascript jquery html css local-storage

Answer 1

Answer №1

One of the main issues lies in attempting to use JSON.stringify on a standard JavaScript array:

eventData = [];

This approach will only work if your data is structured as an object: eventData = {};

Another concern pertains to the following actions:

delete value.sess_id;
delete value.name;
delete value.city;
delete value.country;
delete value.event_url;

The consequence of these actions is that instead of deleting the object, you are actually clearing it out. As a result, your new data resembles this: {}{}{}{}{}... (indicating numerous empty, unidentified objects). To successfully delete the object, you must first determine which specific one you intend to remove ( (*) refer to the subsequent section)

Here is my suggestion/solution :

Eliminate the onclick attribute and utilize jQuery's .click() event handler instead.
Store all data in data attributes - this facilitates easy retrieval of associated data with the element directly as an object (without additional processing).
Checking the toggle state is redundant since it toggles automatically upon each click. The focus should be on confirming the existence of the object and inserting/deleting it accordingly. Utilize .toggleClass() for the image itself and assign a CSS class with suitable image background (as opposed to programmatically replacing it).
(*) Assign a unique key to each object in localStorage so that it can be identified later on. This key could be anything distinctive and recognizable ("matchable") with a specified element. Consider setting it as the id attribute of the currently clicked element, like:
```
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(){

    // initialize an empty object (not an array):
    var eventData = {};
    // check localStorage once the page is fully loaded (not upon click):
    if (localStorage.getItem('eventData') !== null) {
        // highlight any favorited links present in localstorage:
        $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
            $('#'+id).addClass('faved');
        });
    }

    // replace 'onclick' attribute with jQuery .click() event handler:
    $('.favourate_dextop').click(function(e){
        // prevent default link click behavior (instead of using "javascript:void(0);" in the href attribute):
        e.preventDefault();
        // verify if the link's "id" attribute (this.id) exists in the object:
        if (eventData[this.id] !== undefined) {
            // if yes, remove it:
            delete eventData[this.id];
        } else {
            // if not, add it:
            // retrieve all 'data' attributes of the element as an object using the .data() method
            eventData[this.id] = $(this).data();
        }
        // toggle '.faved' class:
        $(this).toggleClass('faved');
        // update localstorage:
        localStorage.setItem('eventData', JSON.stringify(eventData));
    });     
});

In your CSS, introduce a .faved class instead of changing the image background with jQuery:

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

JSFiddle

Answer 2

One of the main issues lies in attempting to use JSON.stringify on a standard JavaScript array:

eventData = [];

This approach will only work if your data is structured as an object: eventData = {};

Another concern pertains to the following actions:

delete value.sess_id;
delete value.name;
delete value.city;
delete value.country;
delete value.event_url;

The consequence of these actions is that instead of deleting the object, you are actually clearing it out. As a result, your new data resembles this: {}{}{}{}{}... (indicating numerous empty, unidentified objects). To successfully delete the object, you must first determine which specific one you intend to remove ( (*) refer to the subsequent section)

Here is my suggestion/solution :

Eliminate the onclick attribute and utilize jQuery's .click() event handler instead.
Store all data in data attributes - this facilitates easy retrieval of associated data with the element directly as an object (without additional processing).
Checking the toggle state is redundant since it toggles automatically upon each click. The focus should be on confirming the existence of the object and inserting/deleting it accordingly. Utilize .toggleClass() for the image itself and assign a CSS class with suitable image background (as opposed to programmatically replacing it).
(*) Assign a unique key to each object in localStorage so that it can be identified later on. This key could be anything distinctive and recognizable ("matchable") with a specified element. Consider setting it as the id attribute of the currently clicked element, like:
```
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(){

    // initialize an empty object (not an array):
    var eventData = {};
    // check localStorage once the page is fully loaded (not upon click):
    if (localStorage.getItem('eventData') !== null) {
        // highlight any favorited links present in localstorage:
        $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
            $('#'+id).addClass('faved');
        });
    }

    // replace 'onclick' attribute with jQuery .click() event handler:
    $('.favourate_dextop').click(function(e){
        // prevent default link click behavior (instead of using "javascript:void(0);" in the href attribute):
        e.preventDefault();
        // verify if the link's "id" attribute (this.id) exists in the object:
        if (eventData[this.id] !== undefined) {
            // if yes, remove it:
            delete eventData[this.id];
        } else {
            // if not, add it:
            // retrieve all 'data' attributes of the element as an object using the .data() method
            eventData[this.id] = $(this).data();
        }
        // toggle '.faved' class:
        $(this).toggleClass('faved');
        // update localstorage:
        localStorage.setItem('eventData', JSON.stringify(eventData));
    });     
});

In your CSS, introduce a .faved class instead of changing the image background with jQuery:

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

JSFiddle

How can I remove a specific JSON object from localStorage based on the data associated with the element that is currently being clicked on?

Answer №1

Similar questions

PHP isn't getting the AJAX POST data from the JavaScript file

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

Target the CSS element with a specific class only if it is not the first child within its parent

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

Implementing a FadeOut effect for the clicked link

Adding a new column to a table that includes a span element within the td element

React- Input value disappears after submission

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

Gin and Golang: Implementing HTML files with CSS styling

Get a CSV file through EmberJs

Concealing elements using react navigation

Experience the power of Kendo UI Date Picker combined with AngularJS. When the datepicker is initialized, it starts

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

retrieving the outcome from a PHP script invoked through Ajax

Changing the mouse cursor dynamically with Angular programming

The timing of jQuery's .load function appears to be off, catching us by surprise

What is the best way to upload my React project to GitHub without adding the node modules directory?

Material UI does not have built-in functionality for displaying colored text within a multiline textfield component in React

What is the best approach for adding variable rows to a Postgres junction table: should you concatenate a query string, utilize multiple queries, or explore alternative methods