Question

所以我有两个输入框，一个用于用户名，另一个用于密码。我想在登录后向用户显示输入，但出于某种原因，所有出现的内容都是：[object HTMLInputElement] [object HTMLInputElement]这是我的代码：

<!DOCTYPE html>
    <meta charset="UTF-8">
        <html lang="en-US">
            <head>
                <link rel="stylesheet" type="text/css" href="java.css">
            </head>
            <title>JAVA</title>
            <body>

                    <form>

                         User name: <input id="uname"></input>
                        <br>
                        <br>
                         Password: <input id="pass"></input>

                        <button onclick="login()">Login</button>
                    </form>

                    <script>

                    var fname = document.getElementById("uname").value;//Username
                    var lname = document.getElementById("pass").value;//Password


                    // Check browser support
                    function login() {
                    if (typeof(Storage) != "undefined") {
                        // Store
                        localStorage.setItem("uname", uname);//Saves username
                        localStorage.setItem("pass", pass);//Saves password
                        // Retrieve
                        document.getElementById("uname").innerHTML = localStorage.getItem("uname");//Gets
                        document.getElementById("pass").innerHTML = localStorage.getItem("pass");//Gets
                        alert(uname + pass);//Shows account info
                    } else {
                        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";//Error
                    }
                    }

                    </script>

            </body>
        </html>

Answer 1

问题似乎是您正在访问由浏览器设置的uname和pass自动全局变量，以表示具有id个节点的节点;相反，您应该使用uname.value和pass.value（JS Fiddle demo），或者更好地使用您在代码中先前声明的变量（尽管它们已设置为{{的初始值） 1}}元素并没有自动更新，所以我在函数（JS Fiddle demo）中移动了它们。

Answer 2

您正在存储实际的输入元素而不是它们的值。您将输入元素值分配给变量（fname和lname），然后存储元素（uname和pass）。

请尝试使用此代码：

＆＃13;

// Store
localStorage.setItem("uname", fname);//Saves username
localStorage.setItem("pass", lname);//Saves password

＆＃13;

我会清理你的变量命名，以便名称更具描述性并与其功能相匹配。

此外，正如其他用户所说，将用户凭据存储在本地存储中并不是一种好习惯。

Answer 3

你混淆了一些事情：

你的变量混乱了;您尝试在任何地方引用uname和pass，但您从未声明过这些变量（您已声明fname和lname）。
您应该在login()函数中声明这些变量，否则在用户实际在输入字段中输入值之前已经声明了这些变量。
您应该使用.value代替.innerHTML来设置输入元素的值。

以下是修复这些问题的代码：

小提琴：http://jsfiddle.net/rx0rjaf3/7/

<强> HTML

<body>
    <form>
        Username: <input id="user" /><br /><br />
        Password: <input id="pass" />
        <button onclick="login()">Login</button>
    </form>
</body>

input个元素没有这样的结束标记：<input></input>。相反，他们是这样的自我关闭：<input id="user" />。
还尝试关闭<br />代码（代替<br>）。对于没有结束标记的其他元素也是如此。
（我删除了一些HTML代码以使答案更具可读性。答案并非必要，但这并不意味着您应该在自己的网站上删除它。）

<强> JS

function login() {
    if (typeof(Storage) != "undefined") {
        // Store
        localStorage.setItem("user", document.getElementById("user").value); //Saves username
        localStorage.setItem("pass", document.getElementById("pass").value); //Saves password

        // Retrieve
        var user = localStorage.getItem("user"); //Gets username
        var pass = localStorage.getItem("pass"); //Gets password

        document.getElementById("user").value = user;
        document.getElementById("pass").value = pass;

        alert("username: "+user+"\n"+"password: "+pass); //Shows account info
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";//Error
    }
}

我将变量的声明移到了Retrieve-section。我这样做了，因为您首先将.values存储到localStorage，然后在localStorage再次存储到.values后立即 - 我假设确保它们已正确存储。
但在此之后，您在将vars存储到.values之前提醒您localStorage，但现在您仍然无法确定它们是否已正确存储到localStorage中{1}}，你知道吗？通过将这些变量移动到Retrieve部分，此问题已修复。
我将JS代码放在一个单独的＆＃39;文件中。这也是我建议你做的事情。这不是绝对必要的，但它更清洁。
在 jsfiddle 中，我使用sessionStorage代替localStorage。这只是为了防止我，您和其他所有人的本地存储都没有填充测试值。

作为最后的建议，我强烈建议您将用户名和密码存储在服务器上的数据库中，而不是客户端（无论是在localStorage，cookie，文本文件还是其他任何东西）！

无法显示html输入

3 个答案: