Question

我正在处理我在空闲时间设计的一段代码，这有点不正统所以请耐心等待。该页面设置为根据正在读取html的“”标记运行各种页面。我只是想找到一种方法将一些页面压缩成一个页面，这看起来好像很有趣。如果你们知道更好的方法，那么任何信息都会受到赞赏。

到目前为止，我已经成功地完成了所有工作，直到我尝试获取表单值，将其分配给全局变量，然后使用脚本在文本中打印全局变量。在这种情况下，它询问用户的名字，目标是在整个网站的各个地方重现名称，以获得更加用户友好的感觉。我认为理解这将来会有用。最后，我想弄清楚如何创建一个用户名和密码的数据库以及所有好东西，但就目前而言，我只是在寻找一个简单的修复方法。我可能错过了一些基本的东西。这是代码：

<head>
    <style>
        body {
            margin: 0 auto;
            background-image: URL('http://fc04.deviantart.net/fs9/i/2006/033/2/c/Matrix_code_by_phi_AU.jpg');
            background-attachment: fixed;
            background-repeat: repeat-y;
        }
    </style>
    <meta charset="utf-8">
    <title>MasterCode</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        var name = "";
         //user is "finished typing," collect input
        function doneTyping() {
            name = document.getElementById('nameid').value;
            closeElement('welcomepage');
            closeElement('namepage');
            showElement('homepage');
        }

        function closeElement(myelement) {
            document.getElementById(myelement).style.display = "none";
        }

        function showElement(myelement) {
            document.getElementById(myelement).style.display = 'block';
        }

        function enterWebsite() {
            closeElement('namepage');
            closeElement('homepage');
            $("#dialog").dialog({
                autoOpen: false
            }, {
                title: "Change"
            }, {
                resizable: false
            });
            $("#opener").click(function () {
                $("#dialog").dialog("open");
                closeElement('welcomepage');
                showElement('namepage');
            })
        }

        function writeName() {
            document.write(name);
        }
    </script>
</head>

<body onload="enterWebsite()">
    <div id="welcomepage">
        <button id="opener" style='background: url("http://4.bp.blogspot.com/-fDgJmT5rzlM/Tq8SpW3ZcbI/AAAAAAAAA1I/l02iiclqKkA/s1600/tracking%2Bclub%2Bmeet%2B%2526%2BMisty%2BAlgonquin%2Bshots%2B106.jpg") no-repeat top left; color: #FFFFFF; height: 685px; width: 1350px; font: 75px helvetica, cursive'>Enter MasterCode</button>
    </div>
    <div id="namepage">
        <form id='name_input'>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <center>
                <input style="background-image:URL('https://waypointprod.blob.core.windows.net/blogfilestore/storage/blogs/headlines/2013/12/5/image.jpg');background-repeat:no-repeat;background-position: ; border: 50px solid black ; height:50px; width:350px; color: #FFFFFF; font: 45px helvetica, cursive;"
                id='nameid' type="text" value="Enter your name.">
                <br/>
                <button id='submit_name' onclick='doneTyping(); return false;'>I Accept The Risks</button>
        </form>
    </div>
    <div id="homepage">
        <font size="25" color="white">
    Welcome, <script> writeName(); </script>
    </font>
    </div>
</body>

</html>

思考？（编辑：根据tewathia的建议使用localStorage解决）

Answer 1

不确定您是使用任何类型的RESTful API甚至是nodejs。如果你是，我做的是防止在cookie或sessionStorage中存储这些数据，我利用服务器端来存储。那么你就不需要在客户端添加那么多逻辑了。此用户数据可能是

{
  "name": "Don Jon",
  "favorite_color": "blue"
}

你甚至可以用蓝色显示页面的不同部分，以超级用户友好

在Javascript中打印正文中的全局变量

1 个答案: