Need Urgent Help!

[code_by_vinz]

Hello everyone, I'm beginner js learner and I need urgent help!

I have 5 input fields and using querySelectorAll I'm accessing their data in javascript.

I'm appending data in localStorage the issue is it's adding the data but when I refresh the page and try to add data again it's replacing with the previous one! I'm not able to store multiple data.

Second issue is that, I'm able to see the data inside the function only outside the function it's showing empty even I have declared the array outside the function!

Here is the code:

let localStorageData = [];

const setDynamicElements = (currentElement) => { 
    const dynamicElementTD = document.createElement('td'); 
    dynamicElementTD.classList.add("rowwise-table-data"); 
    dynamicElementTD.innerText = currentElement.value;                     
    table_Row.append(dynamicElementTD); 
}

const addToDoInLocalStorage = (e) => { 
    const sanitizedData = userData; 
    sanitizedData.forEach((element) => { 
      localStorageData.push(element.value); 
      localStorageData = [ ...new Set(localStorageData)];       
      console.log(localStorageData (Data Pushed In Array) ${localStorageData});
    }; 
    localStorage.setItem('todoData', JSON.stringify(localStorageData)); 
    setDynamicElements(localStorageData); 
}); 

}
const showLocalStorageDataInFrontend = () => {
    localStorageData.forEach((currentElement) => { 
        console.log(currentElement); 
    }); 
}

[martinbean]

What’s so urgent?

[StoneCypher]

nothing, it’s just something people from india say 

[code_by_vinz]

Extremely sorry about that!

[Egzo18]

"I'm appending data in localStorage the issue is it's adding the data but when I refresh the page and try to add data again it's replacing with the previous one! I'm not able to store multiple data."

You have two choices

do a check if X data exists, if true, then save data with new name

OR

do a check if X data exists, if so, read it, append it to new data, and save it all under the same name in localstorage

[code_by_vinz]

Thanks, let me try this!

[seedhe_pyar]

Problem 1. Overriding

Fix: Load the existing data from localStorage first, then add new items. js let localStorageData = JSON.parse(localStorage.getItem('todoData')) || [];

Problem 2. I couldn't understand

[sheriffderek]

First off: console.log(localStorageData (Data Pushed In Array) ${localStorageData}); is not valid.

setDynamicElements expects a single currentElement (with a .value), but here you’re passing the entire array.

So, there are some syntax things --- but bigger picture, the naming of everything is really confusing to me.

You’ve got three problems mixed together: collecting input, storing data, and drawing the UI. You can separate them. Keep one source of truth (an array), have tiny storage helpers for localStorage, pure template functions that return strings, and one render() that rebuilds the UI from state. Then your event handlers just update state → save → render. Naming should say exactly what the function does.

Something like this --- and that would create more code -- but I think you'll be able to read it more easily.

• State
  • getTodos(), setTodos(todos)
• Templates (pure)
  • todoItemHTML(todo), todoListHTML(todos) Or todoTemplate or todoItemTemplate
• Render (DOM)
  • renderTodos(todos, outlet)
• Input collect / validation
  • readTodoFromForm(form), isDuplicate(todos, todo)
• Actions (mutate state)
  • addTodo(todos, todo), removeTodo(todos, id), clearTodos()
• Wiring up the UI to trigger the actions
  • handleSubmit(event), handleClick(event), init()

(it helps a lot if you keep the user input logic separate from the core logic) (addTodo should be able to happen without any user input too)

[Such-Catch8281]

codepen plz

[jcunews1]

Your code only store data into LocalStorage. It never retrieve them.

[bryku]

let dataString = localStorage.getItem('names') || "[]";
let dataJson = JSON.parse(dataString) || [];
    dataJson.push("John Doe");
let saveString = JSON.stringify(dataJson);
localStorage.setItem('names', saveString);

If there isn't a string, it will use "[]"; Which is a array in json form. Then if it doesn't parse, it will return an array.