Preventing duplicate arrays from being stored in localStorage by validating them

Question

Preventing duplicate arrays from being stored in localStorage by validating them

Is there a way to ensure that when the "add to favorites" button is clicked, its data is stored in localStorage only once? If it already exists in localStorage, clicking for a second time should not have any effect except showing an alert message.

I would like to achieve this functionality in Angular Ionic. Any suggestions on how to implement this?

Here is a link to my working application and sample code:

https://github.com/Novian227/WeatherAppIonic

save() {
  let data = [];
  let w = JSON.parse(localStorage.getItem('fav'));

  if (w != null) {
    for (let i=0; i<w.length; i++) {
      data.push(w[i]);
    }
  }

  data.push(this.weather);
  localStorage.setItem('fav', JSON.stringify(data));
}

angular typescript ionic-framework

Answer 1

Answer №1

UPDATE : It turns out that this.weather is actually an object and not a string.

If your array only consisted of simple data types like numbers or strings, using indexOf would have been sufficient. However, since your array contains objects, a different approach is needed.

Instead, you should utilize the findIndex method to determine if the object already exists in the array.

save() {
  let data    = JSON.parse(localStorage.getItem('fav')) || [],
      isExist = data.findIndex((obj) => {
        // Compare all keys here to ensure uniqueness
        // You can include multiple keys as needed
        return obj.date == this.weather.date && obj.temp == this.weather.temp; 
      }) != -1;

  if (isExist) {
    // display alert message here 
  } else {
    data.push(this.weather);
    localStorage.setItem('fav', JSON.stringify(data));
  }
}

Answer 2

UPDATE : It turns out that this.weather is actually an object and not a string.

If your array only consisted of simple data types like numbers or strings, using indexOf would have been sufficient. However, since your array contains objects, a different approach is needed.

Instead, you should utilize the findIndex method to determine if the object already exists in the array.

save() {
  let data    = JSON.parse(localStorage.getItem('fav')) || [],
      isExist = data.findIndex((obj) => {
        // Compare all keys here to ensure uniqueness
        // You can include multiple keys as needed
        return obj.date == this.weather.date && obj.temp == this.weather.temp; 
      }) != -1;

  if (isExist) {
    // display alert message here 
  } else {
    data.push(this.weather);
    localStorage.setItem('fav', JSON.stringify(data));
  }
}

Preventing duplicate arrays from being stored in localStorage by validating them

Answer №1

Similar questions

Issue encountered while trying to insert a new row into the mat-table

Generating distinct identifiers for WebSocket and net.Socket connections

Typescript: The .ts file does not recognize the definition of XMLHttpRequest

Can you demonstrate how to showcase images stored in an object?

Converting HTML to an array using Angular

Alter the Color of the 'div' According to the Background

Experiencing difficulties with managing immutable state within ngrx framework

Angular2 Interactive Modal Pop Up

Accessing router params in Angular2 from outside the router-outlet

Oh no! A catastrophic NG_BUILD error has occurred: The mark-compacts are not working effectively due to an allocation failure near the heap limit. The JavaScript

The Angular logout route appears to be neglected

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

Typescript-powered React component for controlling flow in applications

Can someone point me to the typescript build option in Visual Studio 2019 Community edition?

Alter the value by clicking a button within the DynamicRadioGroupModel in ng Dynamic Forms

Guide to generating a dropdown menu and linking it with data received from a server

Personalize your Client-Id for Paypal

Can someone provide a description for a field within typedoc documentation?

React/TypeScript - react-grid-layout: The onDrag event is fired upon clicking the <div> element

Updating an array of drag and drop elements in Angular Material