Detecting and removing any duplicate entries in an array, then continually updating and storing the modified array in localstorage using JavaScript

Question

Detecting and removing any duplicate entries in an array, then continually updating and storing the modified array in localstorage using JavaScript

I'm facing an issue with the function I have for pushing data into an array and saving it in local storage. The problem is that the function adds the data to the array/local storage even if the same profileID already exists. I want a solution that checks if the same profileID exists, removes the old object from local storage/array, and then adds the new data. Essentially, I want to avoid duplicates of the same profileID being saved in local storage or the array. Additionally, I want to ensure that only the most recent object is saved for the same profileID, overriding any older data.

 
  PUSHData(){
    var myobj = {
      Button: this.isReadMore,
       Class: this.sampleElem.className,
      ProfiliD: this.id,

    };
   
    
    const saved = JSON.parse(localStorage.getItem('CollapseState'));
    if(saved != null){
      this.array.push(myobj);
      localStorage.setItem('CollapseState',JSON.stringify(this.array));
    }else{
      this.array.push(myobj);
      localStorage.setItem('CollapseState',JSON.stringify(this.array));

    }

This is the current content of localStorage:

0: {Button: true, Class: "ShowHide", ProfiliD: "115279"}
1: [{Button: true, Class: "ShowHide", ProfiliD: "115279"},…]
  0: {Button: true, Class: "ShowHide", ProfiliD: "115279"}
  1: [{Button: true, Class: "ShowHide", ProfiliD: "115192"}]

Any assistance would be greatly appreciated.

javascript arrays typescript

Answer 1

Answer №1

When CollapseState contains an array of objects in localStorage, you can take the following steps to meet this requirement :

First, check if the CollapseState array exists in localStorage (which you are already doing)
```
const saved = JSON.parse(localStorage.getItem('CollapseState'));
```
Next, since saved will be an array, iterate through it to determine if ProfiliD exists. If it does, remove the object from the array.
```
saved.forEach((o, index) => {
  if (o.ProfiliD === myobj.ProfiliD) {
    saved.splice(index, 1);
  }
});
```
Then, add the newObj to the saved array.
```
saved.push(newObj);
```

Finally, update the saved array in localStorage.

localStorage.setItem('CollapseState',JSON.stringify(saved));

Answer 2

When CollapseState contains an array of objects in localStorage, you can take the following steps to meet this requirement :

First, check if the CollapseState array exists in localStorage (which you are already doing)
```
const saved = JSON.parse(localStorage.getItem('CollapseState'));
```
Next, since saved will be an array, iterate through it to determine if ProfiliD exists. If it does, remove the object from the array.
```
saved.forEach((o, index) => {
  if (o.ProfiliD === myobj.ProfiliD) {
    saved.splice(index, 1);
  }
});
```
Then, add the newObj to the saved array.
```
saved.push(newObj);
```

Finally, update the saved array in localStorage.

localStorage.setItem('CollapseState',JSON.stringify(saved));

Answer 3

Answer №2

It's recommended to update the existing item in the array instead of pushing a new one when the same ProfiliD already exists in the localStorage:

updateData(){
    var newObj = {
      Button: this.isReadMore,
      Class: this.sampleElem.className,
      ProfiliD: this.id,
    };
    
    const savedData = JSON.parse(localStorage.getItem('CollapseState'));
    if(savedData != null){
      this.array[this.array.findIndex(x=>x.ProfiliD == newObj.ProfiliD)] = newObj;
      localStorage.setItem('CollapseState',JSON.stringify(this.array));
    }else{
      this.array.push(newObj);
      localStorage.setItem('CollapseState',JSON.stringify(this.array));
    }
}

Answer 4

It's recommended to update the existing item in the array instead of pushing a new one when the same ProfiliD already exists in the localStorage:

updateData(){
    var newObj = {
      Button: this.isReadMore,
      Class: this.sampleElem.className,
      ProfiliD: this.id,
    };
    
    const savedData = JSON.parse(localStorage.getItem('CollapseState'));
    if(savedData != null){
      this.array[this.array.findIndex(x=>x.ProfiliD == newObj.ProfiliD)] = newObj;
      localStorage.setItem('CollapseState',JSON.stringify(this.array));
    }else{
      this.array.push(newObj);
      localStorage.setItem('CollapseState',JSON.stringify(this.array));
    }
}

Detecting and removing any duplicate entries in an array, then continually updating and storing the modified array in localstorage using JavaScript

Answer №1

Answer №2

Similar questions

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

The 'then' property is not found on the type 'CloudFunction<Change<DocumentSnapshot>>'

Vue 3 Single Page Application. When selecting, it emits the language and the contentStore does not update the content exclusively on mobile devices

Struggling to Make Div Refresh with jQuery/JS in my Rails Application

What is the best way to include default text in my HTML input text field?

Tips for giving a unique name to an array before including it in a collection of arrays in PHP

Transforming a string into a proc using Ruby and Rails

At what point does the chaining of async/await come to an end?

MongoError: Transaction could not be initiated

Iterating through a JSON query in AngularJS using the ng-repeat directive

Mastering the alignment of Material-UI Menu items

Seasonal selection tool

What are the best practices for managing data input effectively?

Interacting with wpdb using AngularJS

What is the reason for requiring that the value type in a map must be uniform?

Is it possible for a function parameter to utilize an array method?

When a Javascript function marked as async is executed, it will return an object

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

Discover the process of linking a JavaScript file to an HTML file in React

Increasing the concealment of items