How to display dynamically added form data in a table in a different webpage when the data is saved in the local storage using purely javascript? -

i'm doing school project in i'm creating web pages allow users input , display on page. using javascript, html , css web pages.

on "create event" page there form. have saved input local storage not sure how retrieve data display on "events created" page (which shows past events user has created).

here javascript code:

document.addeventlistener("domcontentloaded", docisready); var eventhist;  function docisready() {     eventhist = localstorage.getitem("createevent");      if (eventhist == null) {         eventhist = [];     } else {         eventhist = json.parse(eventhist);     }      //building of table     (var = 0; < eventhist.length; i++) {         var row = document.getelementbyid("list").insertrow(-1);         var cell1 = row.insertcell(0);         var cell2 = row.insertcell(1);         var cell3 = row.insertcell(2);         var cell4 = row.insertcell(3);         var cell5 = row.insertcell(4);         var cell6 = row.insertcell(5);         cell1.innerhtml = eventhist[i].name;         cell2.innerhtml = eventhist[i].positions;         cell3.innerhtml = eventhist[i].venue;         cell4.innerhtml = eventhist[i].date;         cell5.innerhtml = eventhist[i].timestart;         cell6.innerhtml = eventhist[i].timeend;     } }  function addhistory() {     var obj;     var name = document.getelementbyid("name").value;     if (!checkexisting(name)) {         var positions = document.getelementbyid("pos").value;         var venue = document.getelementbyid("venue").value;         var date = document.getelementbyid("date").value;         var starttime = document.getelementbyid("timestart").value;         var endtime = document.getelementbyid("timeend").value;          obj = {             "name": name,             "venue": venue,             "date": date,             "timestart": starttime,             "timeend": endtime         };         eventhist.push(obj)         localstorage.setitem("createevent", json.stringify(obj));     }     //add table     var row = document.getelementbyid("list").insertrow(-1);     var cell1 = row.insertcell(0);     var cell2 = row.insertcell(1);     var cell3 = row.insertcell(2);     var cell4 = row.insertcell(3);     var cell5 = row.insertcell(4);     var cell6 = row.insertcell(5);     cell1.innerhtml = obj.name;     cell2.innerhtml = obj.positions;     cell3.innerhtml = obj.venue;     cell4.innerhtml = obj.date;     cell5.innerhtml = obj.timestart;     cell6.innerhtml = obj.timeend; }  function sorttable() {     eventhist.sort(function(obj1, obj2) {         if (obj1.date > obj2.date)             return 1;         else if (obj1.date < obj2.date)             return -1;         else             return 0;     });     console.log("sorted");      //reload table     var tablerow = document.queryselectorall("#list tr");     console.log(tablerow);     console.log("no of rows=" + tablerow.length);     (var = 0; < eventhist.length; i++) {         var row = document.getelementbyid("list").insertrow(-1);         var cell1 = row.insertcell(0);         var cell2 = row.insertcell(1);         var cell3 = row.insertcell(2);         var cell4 = row.insertcell(3);         var cell5 = row.insertcell(4);         var cell6 = row.insertcell(5);         cell1.innerhtml = eventhist[i].name;         cell2.innerhtml = eventhist[i].positions;         cell3.innerhtml = eventhist[i].venue;         cell4.innerhtml = eventhist[i].date;         cell5.innerhtml = eventhist[i].timestart;         cell6.innerhtml = eventhist[i].timeend;     }     document.getelementbyid("list").style.display = "table"; } 

here html code:

<table border="1px" id="list" onload="addrow();">     <tr>         <th>name of event</th>         <th>positions</th>         <th>venue</th>         <th>date</th>         <th>start time</th>         <th>end time</th>         <!--<th>points awarded</th>-->     </tr> </table>