Currently, I am facing an issue with setting an array of items (divs) to Local Storage. My intention is for these elements to be displayed in the Ui when the page reloads. The function I have written checks if there is already an array stored with that name. If it exists, the local storage needs to be cleared before updating the array with new items added in another part of the code. However, when I check what local storage is returning after setting this array, I find an array filled with empty objects of the same length instead of the expected values. Strangely, just before setting the array, all the items are present as they should be. What could I possibly be missing?
function setToLocalStorage(){
console.log(items); //the array is correctly populated with all items
if(!!localStorage.getItem("items")){
localStorage.removeItem("items");
}
localStorage.setItem("items",JSON.stringify(items));
}
function getDataFromLocalStorage(){
let elements=JSON.parse(localStorage.getItem('items'));
console.log(elements); //An array of empty objects is returned with matching length
}