javascript - 使用 javascript 访问保存在一个页面上的用户输入值到另一页面上

Question

我正在尝试从一个页面、另一页面获取用户输入值，例如，在我的 HTML 页面1上，我有:-

<input type="text" id="someName" placeholder="enter name"/>
<input type="submit" id="submitBtn" value="submit">

在脚本中，我有:-

let Btn = document.querySelector('#submitBtn');
Btn.onclick = function() {
    let name = document.querySelector('#someName').value;
}

现在我想做的是从其他 HTML 页面(而不是输入的页面)访问 name 变量(它携带用户输入的值)。 我知道这是数据库存储值的地方，但在不了解使用数据库的情况下，我想知道是否有仅使用客户端 Javascript 的解决方法。

Answer 1

域和网络存储

<强> Web Storage 在域的每个页面上共享。因此，如果您将数据保存到 localStorage 或 sessionStorage 您可以从不同页面上的同一网络存储获取相同的数据，只要它位于同一域(也包括子域，请参阅下面的示例)。

同一域上的页面示例:

• https://www.example.com/index.html and https://www.example.com/page1.html share the same web storage.

<小时/>

不在同一域中的页面示例:

• https://www.example.com/index.html and https://stackoverflow.com/ do not share the same web storage.

• https://app.example.com/index.html and https://www.example.com/page1.html do not share the same web storage.

<小时/>

说明

由于安全措施，以下演示无法运行，请查看此 Plunker 相反。该演示有:

• 2 页:index.html和page.html .

• 关于index.html <form> submit 时，将不会向服务器发送数据并重置页面。事件发生。数据将保存到localStorage。

• 有一个<iframe>至page1.html 。它有一个链接，因此您可以直接跳转到它，并且它有一个获取数据按钮。该按钮可从 <iframe> 单击以及当您位于页面本身时。单击后，它将从 localStorage 检索数据，从而证明网络存储在共享同一域的页面之间共享。

• <form>的收集和引用其表单控件是通过 HTMLFormControlsCollection API 实现的。 。

---

演示

Plunker

详细信息已在演示中注释。
注意:代码段不起作用，请查看Plunker 相反。

/*
The following declarations are done by using the
HTMLFormControlsCollection API
*/
// Exists on both pages
var form = document.forms[0];
// NodeList of all of the form controls
var ui = form.elements;
// <input> on index.html
var data = ui.data;
// Exists on both pages
var out = ui.out;
// Button on page1.html
var btn = ui.btn;

// Register the 'submit' event on the <form>
form.addEventListener('submit', saveData);

// Register the 'click' event on the button on page1.html
btn.addEventListener('click', getData);

// Callback called on submit on index.html
function saveData(e) {

  /* 
  Prevent the <form> from sending data to server and
  resetting itself
  */
  e.preventDefault();

  // Get the data from <input> on index.html
  var str = data.value;

  // Save data to localStorage
  localStorage.setItem('data', JSON.stringify(str));

  // Notify user
  out.innerHTML = `<i><b>"${str}"</b></i> is stored in localStorage under the key of "data"`;
}

// Callback called when button is clicked on page1.html
function getData(e) {

  // Get data from localStorage
  var stored = JSON.parse(localStorage.getItem('data'));

  // Notify user
  out.innerHTML = `<i><b>"${stored}"</b></i> has been retrieved from localStorage`
}

html {
  font: 400 16px/1.5 Consolas;
}

body {
  font-size: 1rem;
}

label,
input,
output {
  font: inherit;
  display: inline- block;
}

fieldset {
  width: fit-content;
}

.title {
  font-size: 1.1rem;
}

.red {
  color: tomato;
}

#out {
  display: table-cell;
  min-width: 260px;
  padding: 5px;
  height: 24px;
}

legend,
label,
[type='button'] {
  font-variant: small-caps;
}

iframe {
  display: block;
  overflow: scroll;
}

<!--index.html-->

<form id='ui'>
  <fieldset>
    <legend class='title'>Data Share</legend>
    <label for='data'>Data: </label>
    <input id='data' name='data' value='default string'>
    <input type='submit'><br>
    <output id='out' for='data'></output>
  </fieldset>
</form>
<p>Below is an iframe to a separate page.</p>
<iframe src='page1.html'></iframe>
<script src="lib/script.js"></script>

<!--page1.html-->

<form id='ui'>
  <fieldset>
    <legend class='title'><b><a href='page1.html' target='_blank' class='red'>Page 1</a></b></legend>
    <input id='btn' type='button' value='Get Data'>
    <output id='out'></output>
  </fieldset>
</form>

<script src="lib/script.js"></script>