如何使用 JavaScript 将值从一个 HTML 页面传递到另一个页面？
Posted
技术标签:
【中文标题】如何使用 JavaScript 将值从一个 HTML 页面传递到另一个页面？【英文标题】：How can I pass a value from one HTML page to another using JavaScript? 【发布时间】：2011-11-08 05:05:55 【问题描述】：这是我的第一个 html 页面：
<!--first.html-->
<html>
<body>
<div data-role="page" data-theme="a" data-url="first" id="first">
<form id="form1" name="form2" action="checking.html">
<input type="text" name="txtFileName" id="txtFileName"/>
<!-- <button onClick="uploadFile();">Upload</button> -->
<input type="hidden" name="hidden1" value="">
<br><input type="submit" value="Send me your name!" onClick="submitform();"><br>
</form>
<script type="text/javascript">
function submitform()
document.forms.form1.hidden1.value=1;
alert("i am working");
document.form1.submit();
</script>
</div>
</body>
</html>
这是我的第二个 HTML 页面：
<!-- second.html -->
<html>
<head>
</head>
<body>
<h1>Javascript call after page loaded</h1>
<script>
function getQueryVariable2(variable)
var query = window.location.search.substring(1);
document.write(query);
var vars = query.split("&");
document.write("<br />");
document.write(vars);
for (var i=0;i<vars.length;i++)
var pair = vars[i].split("=");
if (pair[0] == variable)
return pair[1];
document.write("<br />txtFileName = " + getQueryVariable2("txtFileName"));
document.write("<br />hid1 = " + getQueryVariable2("hid1"));
</script>
hellllo
</body>
这里我想显示来自first.html的hidden1的内容。请向我建议我应该为此使用什么代码。
【问题讨论】：
@DavidCaunt 这个评论有什么帮助？ @praveen 不幸的是，*** 中的人可能和那个人一样恶心。 【参考方案1】：在 HTML5 中，您可以使用 session 将对象从页面传递到另一个页面：
1- 创建一个会话
sessionStorage.setItem('key', 'value');
2- 阅读会话：
sessionStorage.getItem('key')
检查这个example
【讨论】：
firefox 3及以上、google chrome、ie9均支持【参考方案2】：可能是您使用 GET 参数的最佳方式，例如：
http://mysite//second.html?myparams=value
或者如果它是重要的或大数据 - 使用 POST
【讨论】：
获取查询字符串参数已经是dicussed on stackoveflow【参考方案3】：为您找到了解析 GET 变量的解决方案：
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
return vars;
Get URL parameters & values with jQuery
【讨论】：
【参考方案4】：如果您不使用 html5，您可以通过以下方式将值从一个 html 传递到另一个 - QueryString/GET/Cookies。
HTML5 提供了两个对象 localStorage 和 sessionStorage 来保存客户端数据。两者都允许用户将数据存储在本地机器上。提供两种方法 - getItem('Key') 和 setItem('Key','Value') 或者我们可以将数据存储在 localStorage 或 sessionStorage 的数组中；
// Store
localStorage.setItem("lastname", "abc");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
sessionStorage 对象类似于 localStorage 对象，只是它只存储一个会话的数据。当用户关闭窗口时，数据被删除。
从会话中删除任何项目：
localStorage.removeItem("lastname");
存储为数组：
for (item in items)
localStorage[item] = AnyArray[item];
【讨论】：
以上是关于如何使用 JavaScript 将值从一个 HTML 页面传递到另一个页面？的主要内容，如果未能解决你的问题，请参考以下文章
Java：如何将值从javascript设置为wicket组件文本字段
如何将值从 javascript 传递到 iOS UIWebView