如何使用 JavaScript 将值从一个 HTML 页面传递到另一个页面？答案

【问题标题】：How can I pass a value from one HTML page to another using JavaScript?如何使用 JavaScript 将值从一个 HTML 页面传递到另一个页面？
【发布时间】：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 不幸的是，stackoverflow 中的人可能和那个人一样恶心。

标签： javascript android html cordova

【解决方案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];
}

【讨论】：