Fatal编程技术网
  • javascript/
  • 使用javascript访问保存在一个页面上另一个页面上的用户输入值

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

javascript html

使用javascript访问保存在一个页面上另一个页面上的用户输入值,javascript,html,Javascript,Html,我正在尝试从一个页面获取用户输入值，在另一个页面上，例如，在我的HTML页面1上，我有：- <input type="text" id="someName" placeholder="enter name"/> <input type="submit" id="submitBtn" value="submit"> 现在我要做的是从其他HTML页面（而不是输入的页面）访问name变量（携带用户输入的值）。 我知道这就是数据库用来存储值的地方，但在不知道如何使用db的情况下

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

<input type="text" id="someName" placeholder="enter name"/>
<input type="submit" id="submitBtn" value="submit">
现在我要做的是从其他HTML页面（而不是输入的页面）访问
name
变量（携带用户输入的值）。 我知道这就是数据库用来存储值的地方，但在不知道如何使用db的情况下，我想知道是否只有客户端Javascript可以解决问题。

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

Btn.onclick = function() {
    let name = document.querySelector('#someName').value;
    document.cookie = name;
}
要在另一页上检索名称，请执行以下操作：

let name = document.cookie;
当您想在cookie中存储多个项目时，这会变得更加复杂。幸运的是，这已经得到了回答：

您可以使用Javascript来读取和写入cookie数据，这些数据可以在页面加载之间持久存在

Btn.onclick = function() {
    let name = document.querySelector('#someName').value;
    document.cookie = name;
}
要在另一页上检索名称，请执行以下操作：

let name = document.cookie;
当您想在cookie中存储多个项目时，这会变得更加复杂。幸运的是，这已经得到了回答：

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

同一域上的页面示例：

  • https://
    www.example.com
    /index.html
    和
    https://
    www.example.com
    /page1.html
    共享相同的web存储
不在同一域中的页面示例：

  • https://
    www.example.com
    /index.html
    和
    https://
    /
    不共享相同的web存储

  • https://
    app.example.com
    /index.html
    和
    https://
    www.example.com
    /page1.html
    不共享相同的web存储

解释 由于SO安全措施，以下演示无法正常运行，请查看此。演示包括：

  • 2页：
    index.html
    和
    page.html

  • 在
    index.html
    上，当发生
    submit
    事件时，
    将不向服务器发送数据并重置页面。数据将保存到localStorage

  • 有一个
    到
    page1.html
    。它有一个链接，所以你可以直接跳到它，它有一个获取数据按钮。该按钮可以从
    中单击，也可以在页面上单击。单击后，它将从localStorage检索数据，从而证明web存储在共享同一域的页面之间共享

  • 通过可以收集和引用
    及其表单控件

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

/*
以下声明是通过使用
HTMLFormControlsCollection API
*/
//在两个页面上都存在
var form=document.forms[0]；
//所有表单控件的节点列表
var ui=form.elements；
//关于index.html
var data=ui.data；
//在两个页面上都存在
var out=ui.out；
//页面1.html上的按钮
var btn=ui.btn；
//在上注册“提交”事件
表单。addEventListener（“提交”，保存数据）；
//在page1.html上的按钮上注册“单击”事件
btn.addEventListener（'单击'，获取数据）；
//在index.html上提交时调用回调
函数saveData（e）{
/* 
阻止将数据发送到服务器和
重置自身
*/
e、 预防默认值（）；
//从index.html上获取数据
var str=data.value；
//将数据保存到本地存储
setItem（'data'，JSON.stringify（str））；
//通知用户
out.innerHTML=`“${str}”存储在localStorage中的“data”键下`；
}
//在page1.html上单击按钮时调用回调
函数getData（e）{
//从本地存储获取数据
var stored=JSON.parse（localStorage.getItem（'data'））；
//通知用户
out.innerHTML=`${stored}已从localStorage检索到`
}
html{
字体：400 16px/1.5控制台；
}
身体{
字号：1rem；
}
标签，
输入，
输出{
字体：继承；
显示：内联-块；
}
字段集{
宽度：适合的内容；
}
.头衔{
字号：1.1rem；
}
瑞德先生{
颜色：番茄；
}
#出去{
显示：表格单元格；
最小宽度：260px；
填充物：5px；
高度：24px；
}
传奇
标签，
[type='button']{
字体变体：小大写字母；
}
iframe{
显示：块；
溢出：滚动；
}

数据共享
数据：


下面是一个独立页面的iframe
域和Web存储 在域的每个页面上共享。因此，如果您将数据保存到或中，您可以从不同页面上的相同web存储中获取相同的数据，只要数据位于同一域（也包括子域，请参见下面的示例）

同一域上的页面示例：

  • https://
    www.example.com
    /index.html
    和
    https://
    www.example.com
    /page1.html
    共享相同的web存储
不在同一域中的页面示例：