1

假设我有 2 个 html 文件：form.html 和 confirm.html

form.html 只有一个文本字段和一个提交按钮，当您点击提交时，它将显示您刚刚在文本字段中键入的内容。

    <HTML>
      <HEAD>
        <TITLE>Test</TITLE>
        <script type="text/javascript"> 

        function display(){ 
            document.write("You entered: " + document.myform.data.value);
        } 
        </script> 
      </HEAD>
      <BODY>
      <center>    
<form name="myform">

  <input  type="text" name="data">
  <input type="submit" value="Submit" onClick="display()">

</form>
    </BODY>
    </HTML>

现在我希望当点击提交按钮时它会在confirm.html中显示输入的值。我应该怎么办？我的意思是 confirm.html 中应该包含什么以及如何在其他位置使用 form.html 中的数据，我是否需要创建一个单独的 JavaScript 文件来存储 JS 函数，以便我可以在两个 html 文件中使用它。我对各种东西都很陌生。

注意：这里没有 PHP 或服务器端语言或任何超级语言，我的桌面中只有 2 个 html 文件，我想使用 FireFox 进行测试。

谢谢！

4

4 回答 4

4

您可以尝试使用localStorage或cookies。检查以下找到的 2 个解决方案之一...

1 -如果您有 HTML5，您可以将您的内容存储input到localStorage.

试试这个例子：

form.html：

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">

        // Called on form's `onsubmit`
        function tosubmit() {
            // Getting the value of your text input
            var mytext = document.getElementById("mytext").value;

            // Storing the value above into localStorage
            localStorage.setItem("mytext", mytext);

            return true;
        }

    </script> 
</head>
<body>
    <center>   
        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 
        <form name="myform" onsubmit="tosubmit();" action="confirm.html">

            <input  id="mytext" type="text" name="data">
            <input type="submit" value="Submit">

        </form>
</body>
</html>


confirm.html：

<html>
<head>
<script>

    // Called on body's `onload` event
    function init() {
        // Retrieving the text input's value which was stored into localStorage
        var mytext = localStorage.getItem("mytext");

        // Writing the value in the document
        document.write("passed value = "+mytext);
    }

</script>
</head>    

<body onload="init();">

</body>

</html>

2 -此外，正如@apprentice 所提到的，您还可以使用符合 HTML 标准的 cookie。

试试这个例子：

form.html：

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        // Function for storing to cookie
        function setCookie(c_name,value,exdays)
        {
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
            document.cookie=c_name + "=" + c_value;
        }

        // Called on form's `onsubmit`
        function tosubmit() {
            // Getting the value of your text input
            var mytext = document.getElementById("mytext").value;

            // Storing the value above into a cookie
            setCookie("mytext", mytext, 300);

            return true;
        }

    </script> 
</head>
<body>
    <center>   
        <!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL --> 
        <form name="myform" onsubmit="tosubmit();" action="confirm.html">

            <input  id="mytext" type="text" name="data">
            <input type="submit" value="Submit">

        </form>
</body>
</html>


confirm.html：

<html>
<head>
<script>

    // Function for retrieveing value from a cookie
    function getCookie(c_name)
    {
        var i,x,y,ARRcookies=document.cookie.split(";");
        for (i=0;i<ARRcookies.length;i++)
        {
            x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
            y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
            x=x.replace(/^\s+|\s+$/g,"");
            if (x==c_name)
            {
                return unescape(y);
            }
        }
    }

    // Called on body's `onload` event
    function init() {
        // Retrieving the text input's value which was stored into a cookie
        var mytext = getCookie("mytext");

        // Writing the value in the document
        document.write("passed value = "+mytext);
    }

</script>
</head>    

<body onload="init();">

</body>

</html>
于 2012-10-15T00:27:54.313 回答
2

您可以做的是使用get方法 ( method="get") 提交表单，然后将其发送到您的confirm.html页面 ( action="./confirm.html")。

然后，您可以使用 jQuery 从confirm.html页面的 URL 中检索值。

该网站提供了一种方法来做到这一点：http: //jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html。

然后，您所要做的就是调用您的display()方法。

于 2012-10-15T00:28:51.170 回答
0

接缝很适合persist.js，它可以让您在用户的浏览器中保存和加载数据。包含其 javascript 文件后，您可以像这样保存数据：

var store = new Persist.Store('My Application');
store.set('some_key', 'this is a bunch of persistent data');

您可以稍后在另一个 html 页面中检索保存的数据，如下所示：

var store = new Persist.Store('My Application');
val = store.get('some_key');
于 2012-10-15T00:34:54.023 回答
0

您也可以更改页面的内容，而不是更改页面。提交后，只需使用 innerHtml 变量更改页面。

于 2012-10-15T05:01:47.373 回答