insert and retrieve from local storage

Question

i'm trying to insert data as array to local storage and retrieve all data on an table but i have two problems the first is when i insert it on local storage all data stores as a one array with multiple values

<script type="text/javascript">
  var arr= [];
  function insert(){
    var fname = document.getElementById('fname').value;
    var email = document.getElementById('email').value;
    var pass = document.getElementById('pass').value;
    var phone = document.getElementById('number').value;
    Array.prototype.push.apply(arr, [fname,email,pass,phone]);
    var pval="";
    for(i=0; i<4; i++){
      arr[i];
    }
    let myobj =JSON.stringify(arr);
    localStorage.setItem('arr', myobj);
  }
</script>

and im trying to display the data on a table in different page but .it shows non

<script type="text/javascript">

function addRow(){
    name = localStorage.getItem("fname");
    email = localStorage.getItem("email");
    password = localStorage.getItem("pass");
    phone = localStorage.getItem("number");

    var table = document.getElementsByTagName('table')[0];
    var newRow = table.insertRow(1);

    var cell1= newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    var cell4 = newRow.insertCell(3);
    cell1.innerHTML = name;
    cell2.innerHTML = email;
    cell3.innerHTML = password;
    cell4.innerHTML = phone;
  }

</script>

what is the problem?

Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — Herohtar, Dec 10 '18 at 21:49

score 0 · Answer 1 · answered Dec 10 '18 at 21:51

localStorage.setItem('arr', myobj) // here the local storage is set

You only set an item called arr into the local storage. This item is a json which represents the array you parsed before.

const json = localStorage.getItem("arr");
const obj = JSON.parse(arr)
console.log(obj)

This way you can get the original object from the storage.

insert and retrieve from local storage

1 Answers1