how to set value in div-CodePudding

I want to set the value of div which I get from local storage from the previous input form. I tried to get the value through local storage by setItem & getItem, but it's not working. Here is small part of my code that I tried.

function submit() {
  const prefix = document.getElementById("prefix").value;
  const fname = document.getElementById("fname").value;
  const mname = document.getElementById("mname").value;
  const lname = document.getElementById("lname").value;

  localStorage.setItem("prefix", prefix);
  localStorage.setItem("fname", fname);
  localStorage.setItem("mname", mname);
  localStorage.setItem("lname", lname);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <div >
    <h4 >Name</h4>
    <p >* (same as ID proof)</p>
  </div>
  <div >
    <input type="text" id="prefix"  placeholder="prefix">
  </div>
  <div >
    <input type="text" id="fname"  placeholder="first name">
  </div>
  <div >
    <input type="text" id="mname"  placeholder="middle name">
  </div>
  <div >
    <input type="text" id="lname"  placeholder="last name">
  </div>
</div><br>
<div >
  <input type="submit" id="submit" onclick="submit();">
</div>

window.addEventListener('load', () => {
  const o_prefix = localStorage.getItem("prefix", prefix);
  const o_fname = localStorage.getItem("fname", fname);
  const o_mname = localStorage.getItem("mname", mname);
  const o_lname = localStorage.getItem("lname", lname);

  document.getElementById('o-prefix').innerHTML = o_prefix;
  document.getElementById('o-fname').innerHTML = o_fname;
  document.getElementById('o-mname').innerHTML = o_mname;
  document.getElementById('o-lname').innerHTML = o_lname;
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div >
  <div >
    <h4 >Name</h4>
    <p >* (same as ID proof)</p>
  </div>
  <div  id="o-prefix"></div>
  <div  id="o-fname"></div>
  <div  id="o-mname"></div>
  <div  id="o-lname"></div>
</div>

CodePudding user response：

you made a mistake with localStorage.getItem

here is examples in MDN

localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat');

CodePudding user response：

Firstly instead of storing different values store it in object like and you need to stringfy before saving it in localStorage.

Saving in Local Storage

const prefix = document.getElementById("prefix").value;
const fname = document.getElementById("fname").value;
const mname = document.getElementById("mname").value;
const lname = document.getElementById("lname").value;

localStorage.setItem('user', JSON.stringfy({
  prefix: prefix.value,
  fname: fname.value,
  mname: mname.value,
  lname: lname.value
}))

Getting Data from Local Storage

document.addEventListener('DOMContentLoaded', () => {
  const userData = JSON.parse(localStorage.getItem('user'))

  document.getElementById('o-prefix').innerText = userData.prefix;
  document.getElementById('o-fname').innerText = userData.fname;
  document.getElementById('o-mname').innerText = userData.mname;
  document.getElementById('o-lname').innerText = userData.lname;
})