我正在try 将数据保存在submit.html页面上.数据被存储在本地存储上,我希望每当我访问该页面时,输入的数据总是在表中.目前仅在提交事件时可见.当我用另一个条目返回到submit.html页面时,以前的数据不见了.

代码如下: 1,index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="form.css" />
  <title>Save Later</title>
</head>
<body>
  <div class="alert"></div>
  <form id="save-later-form" action="result.html" onsubmit="callme()" method="POST">
    <h3>Simple Save Later Form</h3>
    <label for="email"><b>Email</b></label>
    <input type="text" id="Email" placeholder="Enter Email" name="email" required>
    <div class="inline" style="display: flex; ">
      <div style="display: flex; flex-direction: column;">
        <label for="First name"><b>First name</b></label>
        <input id="Firstname" type="text" placeholder="First name" name="First name" required>
      </div>
      <div style="display: flex; flex-direction: column; margin-left:320px;">
        <label for="Last name"><b>Last name</b></label>
        <input id="Lastname" type="text" placeholder="Last name" name="Last name" required>
      </div>
    </div>
    <label for="Business"><b>Business</b></label>
    <select id="Business" name="Business">
      <option value="Food & Beverage">Food & Beverage</option>
      <option value="Restaurants">Restaurants</option>
      <option value="Pet Shops">Pet Shops</option>
      <option value="Fashion Boutique">Fashion Boutique</option>
    </select>
    <label for="Description">Description</label>
    <textarea name="Description" id="Description" placeholder="Describe yourself in 100 words"></textarea>
    <button type="submit" id="submit">SUBMIT</button>
    <button type="submit" id="save">SAVE</button>
  </form>
  <script type="text/javascript" src="index.js"></script>
</body>
</html>

2,索引.JS

function getData() {
  return JSON.parse(localStorage.getItem('data') || "[]");
}

function callme() {
  const data = getData();
  const obj = Object.assign(...["Email", "Firstname", "Business"].map(prop =>
    ({
      [prop]: document.getElementById(prop).value
    })));
  localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}

3,Result.html

<!DOCTYPE html>
<html>
<head>
  <title>Detail Page</title>
</head>
<body>
  <h1>User Detail Page</h1>
  <div id="result-table">
    <table border="1">
      <tr>
        <th>Email</td>
        <th>Firstname</td>
        <th>Lastname</th>
        <th>Business</td>
        <th>Description</td>
      </tr>
      <tr>
        <td id="first"></td>
        <td id="second"></td>
        <td id="third"></td>
        <td id="fourth"></td>
        <td id="fifth"></td>
      </tr>
    </table>
    <br>
  </div>

  <script>
window.onload = function() {
  document.getElementById('first').innerText  = localStorage.getItem('Email');
  document.getElementById('second').innerText = localStorage.getItem('Firstname');
  document.getElementById('third').innerText  = localStorage.getItem('Lastname');
  document.getElementById('fourth').innerText = localStorage.getItem('Business');
  document.getElementById('fifth').innerText  = localStorage.getItem('Description');
};
  </script>
  <form action="/index.html">
    <button>Go Back</button>
  </form>
</body>
</html>

I managed to save data to local storage as JSON, but cannot parse multiple data to Result page, currently if resubmitted, data would be overwritten rather than adding new to table. Please any help is appreciated enter image description here

结果页面:

推荐答案

您只需将所有内容放在一页中,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> your title </title>
  <style>
body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
body.onForm  table,
body.onTable form  { display: none }

label {
  display       : block;
  margin-bottom : .2rem;
  }
label b {
  display   : block;
  font-size : .8rem;
  }
label textarea {
  width  : 20rem;
  height : 5rem; 
  }
table {
  background-color: darkslategrey;
  border-collapse  : separate;
  border-spacing   : 1px;
  margin           : 1rem;
  }
table caption {
  padding      : .4rem;
  caption-side : bottom;
  text-align   : right;
  }
th {
  background-color : #7cc0e7;
  padding          : .2rem .3rem;
  }
td {
  background-color : white;
  padding          : .2rem .3rem;
  }
  </style>
</head>
<body class="onForm">

<form name="save-later-form">
  <label>
    <b>Email</b>
    <input type="text" name="Email" placeholder="Enter Email"required value="">
  </label>
  <label>
    <b>First name</b>
    <input type="text" name="Firstname" placeholder="First name" required value="">
  </label>
  <label>
    <b>Last name</b>
    <input type="text" name="Lastname" placeholder="Last name" required value="">
  </label>
  <label>
    <b>Business</b>
    <select name="Business">
      <option value="Food & Beverage" > Food & Beverage  </option>
      <option value="Restaurants"     > Restaurants      </option>
      <option value="Pet Shops"       > Pet Shops        </option>
      <option value="Fashion Boutique"> Fashion Boutique </option>
    </select>
  </label>
  <label>
    <b>Description</b>
    <textarea name="Description" placeholder="Describe yourself in 100 words"></textarea>
  </label>
  <button type="reset" > reset    </button>
  <button type="submit"> Submit   </button>
  <button type="button" id="go-Table-Btn"> go 2 table </button>
</form>

<table id="t-business">
  <caption><button id="go-form-Btn"> go 2 form</button></caption>
  <thead>
    <tr><th>Email</th><th>Firstname</th><th>Lastname</th><th>Business</th><th>Description</th></tr>
  </thead>
  <tbody></tbody>
</table>
</table>
  <script>
const 
  saveLaterForm = document.forms['save-later-form']
, goTableBtn    = document.querySelector('#go-Table-Btn')
, goFormBtn     = document.querySelector('#go-form-Btn')
, ElmsOrder     = ['Email','Firstname','Lastname','Business','Description']
, ls_business   = JSON.parse( localStorage.getItem('ls_business') || '[]')
, tBusinessB    = document.querySelector('#t-business tbody')
  ;
saveLaterForm.onsubmit = e =>
  {
  e.preventDefault()
  let formInputs = Object.fromEntries( new FormData(saveLaterForm).entries() ) 
  ls_business.push(formInputs)
  addRow( formInputs )
  localStorage.setItem('ls_business',JSON.stringify(ls_business))
  document.body.classList.replace('onForm','onTable')
  saveLaterForm.reset()
  }

for (let lsRow of ls_business) addRow( lsRow )

function addRow( elms )
  {
  let row = tBusinessB.insertRow()
  for (let elName of ElmsOrder) row.insertCell().textContent = elms[elName]
  } 

goTableBtn.onclick =_=> document.body.classList.replace('onForm','onTable')
goFormBtn.onclick  =_=> document.body.classList.replace('onTable','onForm')

  </script>
</body>
</html>

Html相关问答推荐

删除第一个列表项上的左边框

UseEffect()从不调用preact

通过POST方法提交html表单时CSV文件无法通过(在使用Django的上下文中)

为所有必填字段添加所需的占位符文本(Angular Material)

标签数据的XPath?

通过动态div的对角线

使用HTML进行DAX测量

将表格背景图像置于行背景 colored颜色 之上

摆动的html标签

浏览器是否可以呈现存储在代码点0x09处的字形?

在TWebLabel标题中设置换行符/换行符的方法?

有没有一种方法可以提高代码中tailwind 类名的可读性?

:invalid Select 器的惰性判断

复制两个

会产生一个空行;复制

元素不会

为什么我的图像在悬停时与固定顶部栏重叠?

如何在div中设计伪元素?

当我将鼠标悬停在测试类上时,左侧类的 colored颜色 没有改变

我如何让这个动画播放,然后停止,然后在设定的时间后再次播放? (CSS)

如何使用 :hover zoom 重叠图像?

尽管设置了 width:100% left:0,但居中对齐的 CSS 动画并不对称