我试图从一个页面上获取用户输入值，在另一个页面上，例如，在我的 HTML page1 上，我有：-
<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;
}
现在我要做的是name从其他 HTML 页面（不是输入输入的页面）访问变量（携带用户输入的值）。我知道这是数据库用来存储值的地方，但是在不了解使用 db 的情况下，我想知道是否有仅使用客户端 Javascript 的解决方法。
Web 存储在域的每个页面上共享。因此，如果您将数据保存到localStorage或sessionStorage，您可以从不同页面上的相同 Web 存储中获取相同数据，只要它们位于同一域（也包括子域，请参见下面的示例）。
同一域中的页面示例：
https://www.example.com/index.html和https://www.example.com/page1.html共享相同的网络存储。
不在同一域中的页面示例：
https://www.example.com/index.html和https://stackoverflow.com/不共享相同的网络存储。
https://app.example.com/index.html和https://www.example.com/page1.html不共享相同的网络存储。
由于 SO 安全措施，以下演示无法正常工作，请查看此Plunker。该演示有：
2 页：index.html和page.html。
在index.html该<form>会不将数据发送到服务器，并在复位的页面submit事件发生。数据将保存到localStorage。
有一个<iframe>to page1.html。它有一个链接，所以你可以直接跳转到它，它有一个Get Data按钮。该按钮可从<iframe>以及当您在页面上时单击。单击后，它将从 localStorage 检索数据，从而证明 Web 存储在共享同一域的页面之间共享。
HTMLFormControlsCollection API<form>可以收集和引用及其表单控件。
详细信息在演示中评论。
注意：代码段不起作用，请查看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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句