javascript - 有没有一种好方法可以在 HTML 或 JavaScript 中向用户显示收集的数据并仍然保留数据？

Question

我试图通过让用户输入来从 HTML 页面中获取一些用户数据。我想保留这些数据(它们是某种 ID 号)，并在用户输入的任何后续部分中将其显示给用户转到(当前一页上的不同 href 部分)，从中收集更多数据，并最终将数据呈现给用户作为评论。我认为这有点像 HTML“Hello World”，但事实证明它不止于此。 。我发现 document.write() 是错误的方法，但对于如何实现这一点没有好的答案。收集这些数据是我需要从用户那里得到的第一件事，然后我会收集更多的数据，所以我必须能够获取数据并让用户四处走动。

我在这个网站和其他网站上花了一天半的时间，拿出两本书(是​​的，纸!)寻找答案，但没有找到可用的解决方案。似乎什么都不起作用。完成后，我想给用户一个机会在提交之前更正数据，目前最有可能发布，但如果实现的话将是一个服务器。

这是我收集的方式，尽可能简化:

<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>

...

<p id="demo"></p>

Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>

没有错误消息；事情就是行不通。我想要求用户输入字段 1，让他们输入，单击接受，将数据存储在变量中并将信息回显给他们。听起来很简单，但事实并非如此。

Answer 1

该表单会妨碍您，除非您想将数据发布到某个地方，否则您不需要它。由于您只想直接从输入字段获取数据并自行存储，因此您可以执行以下操作:

<div>
  Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
  <br>
  Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
  <br>
  <button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>

<p id="demo"></p>

<script>
  function displayNumbers() {
    // get the stored values and show them to the user
    var providerNPI = sessionStorage.getItem('providerNPI');
    var providerTIN = sessionStorage.getItem('providerTIN');
    document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
  }

  function storeNumbers(numbersObject) {
    // store the values locally so you can access them wherever you need them
    sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
    sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
  }

  function captureNumbers() {
    // first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
    var providerNumbers = {};
    providerNumbers.providerNPI = document.getElementById("providerNPI").value;
    providerNumbers.providerTIN = document.getElementById("providerTIN").value;

    // then pass the object variable to the storage function
    storeNumbers(providerNumbers);

    // then call the display function
    displayNumbers();
  }
</script>