Question

假设我在页面上有一个输入框。我单击一个按钮，输入中的任何内容都会转移到另一个页面并使用JavaScript进行检索。

Page1 = C：\ Documents \ page1.html

第1页代码：

    <!DOCTYPE html>
    <html>
    <body>
        <p>Name: <input type="text" id="user_input"</input></p>
        <button onclick="start_page_2()">submit</button>

        <script>
            var start_page_2 = function(){
                contents = document.getElemeentById("user_input").value;
                //code to go to page 2;
                }
        </script>
    </body>
    </html>

Page2 = C：\ Documents \ page2.html

Page2代码：

    <DOCTYPE html>
    <html>
    <body>
    <h1 id="my_title">empty</h1>
    <script>
        //on load execute this {
            //retrive contents from page1 and save as contents
            //document.getElementById("my_title").innerHTML(contents);
            //}
    </script>
    </body>
    </html>

*请注意，输入将包含空格（如果有任何帮助）。所有有用的答案都将被投票。

Answer 1

您可以使用localStorage

1页

<!DOCTYPE html>
    <body>
        <p>Name: <input type="text" id="user_input"</input></p>
        <button onclick="start_page_2()">submit</button>

        <script>
            var start_page_2 = function(){
                var contents = document.getElementById("user_input").value;
                localStorage.setItem('user', contents);
                window.location.href = 'page2.html';
            }
        </script>
    </body>
</html>

2页

<DOCTYPE html>
    <body>
        <h1 id="my_title">empty</h1>
        <script>
            var full_name = localStorage.getItem('user');
            document.getElementById("my_title").innerHTML = full_name;
        </script>
    </body>
</html>

这仅适用于使用实际网络服务器测试您的网页，并且MDN上有旧版浏览器的填充

从页面到页面传递信息（离线）

1 个答案: