使用 HTML WebStorage 拥有多个用户名和密码

Question

我正在使用 WebStorage 制作一个带有 username/password 的简单登录系统。（我不知道这是否是最好的方法。）它正在工作，但问题是，它只能使用一个用户名和密码。我该怎么做才能存储多个 usernames/passwords？或者 perhaps 我应该使用不同的系统来执行此操作？代码：

<html>
<head>
</head>
<body>
    <input type="text" placeholder="input username here" id="textbox">
    <input type="text" placeholder="input password here" id="textbox2">
    <input type="button" value="sign up" onclick="signup()">
    <br>
    <input type="text" placeholder="input username here" id="textbox3">
    <input type="text" placeholder="input password here" id="textbox4">
    <input type="button" value="login" onclick="login()">

    <p id="result"></p>

    <br>
    <br>
    <div id="settings">
        <h1>Settings</h1>
        <br>
        <input type="text" placeholder="background color" id="bgc">
        <br>
        <input type="button" onclick="changeSettings()" value="Change settings">
    </div>
    <script>
        function changeSettings() {
            if(loggedIn == true) {
                if(typeof(Storage)!= "undefined") {
                    var backg = document.getElementById("bgc").value;
                    if(backg!="") {
                        localStorage.setItem("backgroundColor", backg);
                        document.body.style.background = localStorage.getItem("backgroundColor");
                    } else {
                        alert("Enter a color.")
                    }
                } else {
                    alert("No support.")
                }
            } else {
                alert("You must be logged in to do that.")
            }
        }

        function loadSettings() {
            if(typeof(Storage)!="undefined") {
                document.body.style.background = localStorage.getItem("backgroundColor");
            } else {
                alert("No support.")
            }
        }

        function signup() {
            if(typeof(Storage)!= "undefined") {
                var username = document.getElementById("textbox").value;
                var password = document.getElementById("textbox2").value;
                if(username!="" && password!="") {
                    localStorage.setItem("username", username);
                    localStorage.setItem("password", password);
                } else {
                    alert("Please enter a valid username and password.")
                }
            } else {
                alert("No support.")
            }
        }

        function login() {
            if(typeof(Storage)!= "undefined") {
                var username = localStorage.getItem("username");
                var password = localStorage.getItem("password");
                var usernameInput = document.getElementById("textbox3").value;
                var passwordInput = document.getElementById("textbox4").value;
                if(usernameInput!="" && passwordInput!="") {
                    if(usernameInput == username && passwordInput == password) {
                        document.getElementById("result").innerHTML = "Logged in!";
                        loggedIn = true;
                        loadSettings();
                    } else {
                        document.getElementById("result").innerHTML = "Wrong password/username!";
                    }
                } else {
                    alert("Please enter a valid username and password.")
                }
            } else {
                alert("No support.")
            }
        }
    </script>
</body>
</html>

ps: 如有打扰请见谅:p

Answer 1

如果您想存储用户输入（例如用户名和密码），您可能应该使用 SQL。

Hashing & Password Storage

如果您正在尝试学习数据库，值得一看的好视频！ :)

Answer 2

在 localStorage 中存储纯 username/password 不是一个好方法。任何人都可以改变这些价值。由于您使用

检查登录

localStorage.setItem("username", username);
localStorage.setItem("password", password);

var username = localStorage.getItem("username");
var password = localStorage.getItem("password");

usernameInput == username && passwordInput == password

这个登录条件可以通过不同的方式实现。

从 Google 找到 this 文章，希望您能在安全方式:)

使用 HTML WebStorage 拥有多个用户名和密码

Using HTML WebStorage to have multiple username and passwords

html

javascript

web-storage