堆栈内存溢出
  繁体   English   中英

如何显示本地存储中的多个数据

[英]How to display multiple data from local storage

 原文  2022-08-04 02:27:34  2   1    html/ json/ forms/ local-storage

问题描述

我正在尝试将数据保存在 submit.html 页面上。 数据存储在本地存储中，我希望输入的数据在我访问该页面时始终在表中。 目前它仅在提交事件时可见。 当我在 go 回到 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、结果.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>

我设法将数据作为 JSON 保存到本地存储，但无法将多个数据解析到结果页面，目前如果重新提交，数据将被覆盖而不是向表中添加新数据。 请任何帮助表示赞赏在此处输入图像描述

结果页面：

1 个解决方案

解决方案1
 1 已采纳  2022-08-04 05:02:35

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

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何从阵列中检索和显示本地存储中的数据？ 如何将本地存储中的对象显示到网站上？ 如何在浏览器的本地存储中存储多个数据 尝试将数据从本地存储显示到 2 个 html 元素 如何使用JavaScript从本地存储中检索数据？ 如何在 HTML 页面中动态检索和显示本地存储数据？ 如何在html上显示本地存储 如何在html元素中显示本地存储中的数组？ 如何在不同页面上显示本地存储中的内容 如何将多个表单数据值存储到本地存储中的单个键
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM