Is there a way to store input values in local Storage an display them to the UI?-CodePudding

I want to store the input values from a user, that is their name, age and agender to local storage and then display it to UI. now, the problem is after I store to local storage and refresh the page it goes away but stores in local storage, which is to suppose to stay even if I refresh the page. how do I go about it?

<main>
        <div >
            <h1>student's info</h1>
            <form >
                <input type="text" name="name" placeholder="Enter Full Name">
                <input type="number" name="name" placeholder="Age">
                <input type="text" class = "gender"name="name" placeholder="gender">
                <button  type="submit">submit</button>
            </form>
        </div>
        <div > 
            <div >
            </div>
        </div>
    </main>


// GLOBAL VARIABLES
    var submitBtn, student,fullName,age, gender;
    submitBtn=document.querySelector('.submit-btn');
    student=document.querySelector('.student');
    fullName=document.querySelector('.full-name');
    age=document.querySelector('.age');
    gender=document.querySelector('.gender');
    var arr = [];
    // EVENTLISTENERS
    submitBtn.addEventListener('click', addStudent);
    // FUNCTIONS
    function addStudent(e) { 
        e.preventDefault();
        let div = document.createElement('div');
        div.classList.add('student-box');
        let nameSpan = document.createElement('span');
        nameSpan.classList.add('student-name');
        nameSpan.innerText = fullName.value;
        let ageSpan = document.createElement('span');
        ageSpan.classList.add('student-age');
        ageSpan.innerText = age.value;
        let genderSpan = document.createElement('span');
         genderSpan.classList.add('student-gender');
         genderSpan.innerText = gender.value;
          saveToLocal();
         div.append(nameSpan, ageSpan, genderSpan );
         student.appendChild(div);
         fullName.value = '';
         age.value = '';
         gender.value = '';
         
    }
        
     function saveToLocal() {
        getData();
        arr.push({
            name:fullName.value,
            ages:age.value,
            genders:gender.value
    
        });
        localStorage.setItem('student', JSON.stringify(arr))
    }
    
    function getData() {
        if(localStorage.getItem('student') !== null) {
            JSON.parse(localStorage.getItem('student'));
            //localStorage.setItem('student', JSON.stringify(arr));
            //var dis = JSON.Parse(localStorage.getItem('student'));
            //student.appendChild();
    
            //arr =v JSON.parse();
            //console.log(arr)
    
        

    }//else{
        
            
        
        //}
        }

CodePudding user response：

You need to get the student object from local storage and then use the values to set your input values like this:

if(localStorage.getItem('student') !== null) {
    try {
      const studentData = JSON.parse(localStorage.getItem('student'))[0];
      fullName = studentData.name;
      age = studentData.age;
      gender = studentData.gender;
      document.getElementsByClassName("full-name")[0].value = fullName;
      document.getElementsByClassName("age")[0].value = age;
      document.getElementsByClassName("gender")[0].value = gender;
    } catch() {}
}

CodePudding user response：

as your data is storing to localstorage so try like below,

document.getElementById("buttotton").onclick = function() {  
fun()  
};  
function fun()
{
  var arr = [];
        arr.push({
            name:document.getElementsByClassName("full-name")[0].value,
            ages:"25",
            genders:"male"
    
        });
        localStorage.setItem('student', JSON.stringify(arr));
}
if(localStorage.getItem('student') !== null) {

  let text = localStorage.getItem("student");
  const obj = JSON.parse(text);
   // const studentData = JSON.parse(localStorage.getItem('student'));
    fullName = obj[0].name;
     
 
    document.getElementsByClassName("full-name")[0].value = fullName;
    
  
}

<input type="text" name="name" placeholder="Enter Full Name">
<input type="button" id="buttotton" value="save">