javascript - 当数据使用纯javascript保存在本地存储中时，如何在不同网页的表格中显示动态添加的表单元素？

Question

我正在做一个学校项目，其中我正在创建网页以允许用户输入然后将其显示在另一个页面上。我只在网页中使用 javascript、html 和 css。在“创建事件”页面上有一个表单。我已将所有输入保存到本地存储中，但现在我不确定如何检索数据以显示在另一个名为“事件历史记录”的页面上。这是我的代码:

function saveToStorage() {
 var nameofevent=document.getElementById("name").value;
 var pList=document.getElementsByName("pos");
 var positions=[];

 for (i=0; i<pList.length; i++){
 positions.push(pList[i].value);
 console.log(pList[i].value);
 }

 //for (i=0; i<positions.length; i++){
 //console.log(positions[i].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;
 var contact=document.getElementById("contact").value;
 var email=document.getElementById("email").value;
 var desc=document.getElementById("desc").value;

 var one={"name":nameofevent,"pos":positions,"venue":venue,"date":date,"timeStart":starttime,"timeEnd":endtime,"contact":contact,"email":email,"desc":desc};
 localStorage["CreateEvent"]=JSON.stringify(one);


 return false;

}

每当用户提交“创建事件”表单时，用户输入的数据将显示在另一个页面的表格中。这是我的表格代码:

<h1>Events Created</h1>
 <table border="1px" id="tab">
     <thead>
         <tr style=" font-size: 30px">
             <th id="event">Name of event</th>
             <th>Positions</th>
             <th id="">Venue</th>
             <th>Date</th>
             <th>Start Time</th>
             <th>End Time</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>eg. Name</td>
             <td>eg. Position1, position2</td>
             <td>eg. venue</td>
             <td>eg. date</td>
             <td>eg. start time</td>
             <td>eg. end time</td>
         </tr>

     </tbody>

Answer 1

var saved=JSON.parse(localStorage.getItem("createEvent"));
alert(saved.name);
//etc