域和Web存储

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变量（带有用户输入的值）。我知道这是数据库用来存储值的地方，但是在不了解使用db的情况下，我想知道是否只有客户端Javascript才有解决方法。

Answer 1

您可以使用Javascript的document.cookie来读取和写入cookie数据，这些数据可以在页面加载之间保持不变。

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

要在另一页上检索名称，

let name = document.cookie;

当您想在cookie中存储多个项目时，这变得更加复杂。幸运的是，这已经得到解答：How do I create and read a value from cookie?

Answer 2

域和Web存储

Web Storage 在域的每个页面上共享。因此，如果将数据保存到 localStorage 或 sessionStorage ，您可以从不同页面上的同一Web存储中获取相同数据，只要它们在同一个域中（也包括子域，请参见下面的示例）。

同一域上的页面示例：

https:// www.example.com /index.html和https:// www.example.com /page1.html共享相同的网络存储。

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

https:// www.example.com /index.html和https:// stackoverflow.com / < strong>请勿共享相同的网络存储空间。



https:// app.example.com /index.html和https:// www.example.com {{1} } 请勿共享相同的网络存储空间。

说明

由于SO安全措施，以下演示无法正常运行，请查看此 Plunker 。该演示具有：

2页：/page1.html和index.html。
在page.html上，index.html将不发送数据到服务器，并在发生<form>事件时重置页面。数据将保存到localStorage。
从submit到<iframe>。它具有一个链接，因此您可以直接跳至该链接，并且它具有一个 Get Data 按钮。您可以在page1.html上单击该按钮，也可以在页面上单击该按钮。单击后，它将从localStorage检索数据，从而证明Web存储在共享相同域的页面之间共享。
HTMLFormControlsCollection API 使<iframe>及其表单控件的收集和引用成为可能。

演示

Plunker

详细信息在演示中进行了评论。
注意：代码段不起作用，请查看 Plunker 。

<form>

/*
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;
}

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

2 个答案:

域和Web存储

说明

演示

Plunker