How to save multiple identification numbers in localStorage with JavaScript

Question

How to save multiple identification numbers in localStorage with JavaScript

I am looking to implement a favorites feature on my website using HTML, CSS, JavaScript, and JSON. The JSON file is loaded through AJAX and users can search for devices to add to their favorites using sessionStorage and localStorage. However, I'm facing an issue where adding a new device overrides the existing one. I'm considering using an IF statement to check if there is already an ID present before adding a new one, but I'm unsure of how to proceed...

Here are some code samples:

$(document).on('click', '.productfavourite', function(event) { 

  // Get the ID of the clicked element as product fave
  productFave = event.target.id;

  localStorage.setItem('productFave', productFave);
  console.log(productFave);
  window.location="favourites.html";
});

javascript

Answer 1

Answer №1

One recommendation I have is to store the chosen items in either an object or array prior to saving it into the localStorage. Then, you can convert the object or array into a json string.

let selectedItems = [];
$(document).on('click', '.productfavourite', function(event) {
    selectedItems.push(event.target.id);
    console.log(selectedItems);
});

By following this approach, you will end up with an array that can easily be converted to json format. I hope this explanation proves useful for your needs.

Answer 2

One recommendation I have is to store the chosen items in either an object or array prior to saving it into the localStorage. Then, you can convert the object or array into a json string.

let selectedItems = [];
$(document).on('click', '.productfavourite', function(event) {
    selectedItems.push(event.target.id);
    console.log(selectedItems);
});

By following this approach, you will end up with an array that can easily be converted to json format. I hope this explanation proves useful for your needs.

Answer 3

Answer №2

In order to effectively manage your favorite items, it is essential to maintain a collection whether in the form of a list or dictionary. Here are some illustrative examples that can guide you through the process.

To retrieve the existing productFav from your localStorage, you can utilize the following code snippet:

var fav = localStorage.getItem("productFav") || [];

Instead of storing a single value in localStorage, aim to store the entire list by appending the new favorites to the existing ones and then serialize the updated result into a JSON string.

fav.push(newItem);

localStorage.setItem("productFav", JSON.stringify(fav));

If we assume fav represents a list, consider utilizing a dictionary if you wish to prevent the inclusion of duplicate entries.

Answer 4

In order to effectively manage your favorite items, it is essential to maintain a collection whether in the form of a list or dictionary. Here are some illustrative examples that can guide you through the process.

To retrieve the existing productFav from your localStorage, you can utilize the following code snippet:

var fav = localStorage.getItem("productFav") || [];

Instead of storing a single value in localStorage, aim to store the entire list by appending the new favorites to the existing ones and then serialize the updated result into a JSON string.

fav.push(newItem);

localStorage.setItem("productFav", JSON.stringify(fav));

If we assume fav represents a list, consider utilizing a dictionary if you wish to prevent the inclusion of duplicate entries.

Answer 5

Answer №3

If you're looking for alternatives, consider the following:

if(Storage !== "undefined") {
   localStorage.setItem("favoriteProduct", localStorage.getItem("favoriteProduct")+ ", newFaveItem3");
}

Answer 6

If you're looking for alternatives, consider the following:

if(Storage !== "undefined") {
   localStorage.setItem("favoriteProduct", localStorage.getItem("favoriteProduct")+ ", newFaveItem3");
}

How to save multiple identification numbers in localStorage with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for obtaining a compilation of JavaScript files that are run when an event is triggered?

When evaluating objects or arrays of objects to determine modifications

Using jQuery to trigger a click event on a radio button prevents the button from being checked

How to load an iframe only upon clicking on a link

Integrating fresh components into a JSON structure

Using conditional rendering within the map function in React

Exploring the process of performing an AJAX JQuery HTTP request using JavaScript and PHP on the server side - any tips?

X-ray Picker failing to retrieve a value

Simulating HTML5 Drag and Drop with Selenium Webdriver using JavaScript

Using Angular to retrieve JSON data from a static file

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

AngularJS is failing to render elements stored within an array retrieved from MongoDB

Implementing react-table version 7 to display dynamic columns and rows fetched from a JSON dataset via an API

Guidelines on declining a pledge in NativeScript with Angular 2

Should custom directives be utilized for templating within AngularJS applications?

Steps to sending a request with a custom user agent

Improve code efficiency by streamlining a function and using more effective syntax techniques

Attempting to utilize a mongo connection multiple times will result in an error message stating "Unable to use a session that

Node.js is known for its unreliable promise returns

Node was experiencing difficulty locating a module alias that had been defined in the tsconfig file and package.json