Использование HTML WebStorage для нескольких имен пользователей и паролей

Я использую WebStorage, чтобы сделать простую систему входа в систему с именем пользователя / паролем. (Я не знаю, лучший ли это способ.) Он работает, но проблема в том, что он работает только с одним именем пользователя и паролем. Как мне сделать так, чтобы он мог хранить несколько имен пользователей / паролей? Или, возможно, я должен использовать другую систему для этого? Код:

<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

Источник

2 ответа

Решение

Возможно, вам следует использовать SQL, если вы хотите хранить пользовательские данные, такие как имена пользователей и пароли.

Хеширование и хранение паролей

Хорошее видео для просмотра, если вы пытаетесь изучать базы данных!:)

Источник

Не очень хороший способ хранить простое имя пользователя / пароль в localStorage. любой может изменить это значение. Поскольку вы проверяете логин используя

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

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

usernameInput == username && passwordInput == password

Это условие входа в систему может быть реализовано разными способами.

Нашел эту статью в Google, надеюсь, у вас появится идея сделать это безопасным способом:)

Источник
Другие вопросы по тегам