• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

134
Views
LocalStorage doesn't persist the data after page refresh

I have a problem with the getItem of my localStorage in my React Form. I put a onChange attribute:

<div className = 'InputForm' onChange={save_data}>

I found the setItem function to store the data in. Here is the function:

 function save_data(){

  let textarea = document.querySelectorAll("textarea")
  let input = document.querySelectorAll("input[type='text']")
  let saved_fields = []
                                                              
 textarea.forEach(x => {

  saved_fields.push({
  key: x.className,
  value: x.value
  })
                                      
 })
                              
 input.forEach(x => {
  saved_fields.push({
  key: x.className,
  value: x.value
  })
                                    
 })
                                  
localStorage.setItem("saved_data", JSON.stringify(saved_fields))

}

My main problem is that I don't find a way to put the data back to the page after the page reload. I just found out how to persist all my inputs in the console:

 window.onload = dataLoad();
                                
 function dataLoad () {

  let show_saved_data = localStorage.getItem("saved_data");
                                  
  console.log('show_saved_data:',JSON.parse(show_saved_data));

 }

Can you guys help me find the retrieve/persist data function?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Can we have your HTML form to help you? You should not identify your inputs / textareas by their className.

After that, by using ID as identifiers for your input / textarea, you just have to do it in reverse:

  • Get your input/textarea list
  • forEach items, set the value based on the ID
function dataLoad () {
  var show_saved_data = localStorage.getItem("saved_data");
  var inputList = JSON.parse(show_saved_data);
  inputList.forEach(x => {
    document.getElementById(x.key).setAttribute('value', x.value);
  })
}

Giving us your complete HTML/JS will be easier to give you a complete solution.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error