web-dev-qa-db-ja.com

JavaScript：localStorageにログイン/登録

こんにちは、おそらく簡単な質問ですが、JavaScriptでのログイン/登録に問題があります。 localStorageを介してユーザーデータを保存していますが、ログインしようとすると、入力したデータが間違っているというアラートメッセージが常に返されます。

編集：storedNameは未定義ですが、パスワードは未定義です。まだわかりません。

編集：問題は解決しました。ハンクに感謝！解決策はコメントにあります。

これが私のHTMLコードです：

<!DOCTYPE html>
<html>
    <head>
        <title>Learning JavaScript</title>
    </head>
    <body>
        <form id="register-form"> 
            <input id="name" type="text" placeholder="Name" value=""/>
            <input id="pw" type="password" placeholder="Password" value=""/>
            <input id="rgstr_btn" type="submit" value="get Account" onClick="store()"/> 
        </form>

        <form id="login-form"> 
            <input id="userName" type="text" placeholder="Enter Username" value=""/>
            <input id="userPw" type="password" placeholder="Enter Password" value=""/>
            <input id="login_btn" type="submit" value="Login" onClick="check()"/> 
       </form>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" language="javascript" src="login.js"></script>

    </body>
</html>

そしてここに私のJavaScriptコードがあります：

// Name and Password from the register-form
var name = document.getElementById('name');
var pw = document.getElementById('pw');

// storing input from register-form
function store() {
    localStorage.setItem('name', name.value);
    localStorage.setItem('pw', pw.value);
}

// check if stored data from register-form is equal to entered data in the   login-form
function check() {

    // stored data from the register-form
    var storedName = localStorage.getItem('name');
    var storedPw = localStorage.getItem('pw');

    // entered data from the login-form
    var userName = document.getElementById('userName');
    var userPw = document.getElementById('userPw');

    // check if stored data from register-form is equal to data from login form
    if(userName.value !== storedName || userPw.value !== storedPw) {
        alert('ERROR');
    }else {
        alert('You are loged in.');
    }
}
javascripthtmllocal-storage
5
user5616242

あなたは2つの問題を抱えています：1.「name」は予約された単語です、それはあなたに偽って行動するでしょう、それをname1またはnmまたは何かのような他のものに変更します。 2.！==を使用しないでください。！=で十分です。とにかくロジックに問題があります。これを次のように変更してください。

if(userName.value == storedName && userPw.value == storedPw) {
        alert('You are loged in.');
    }else {
        alert('ERROR.');
    }

しかし、ええ、私はあなたが単に練習していることを知っていますが、実際にクライアント側でユーザー名とパスワードを保存しないでください。

3
Hank
// entered data from the login-form
var userName=document.getElementById('userName');
var userPw = document.getElementById('userPw');

ここで問題が発生しました。入力した値をlocalStorageデータと比較したいとしました。これは良いですが、次のようになっているはずです。

var userName = document.getElementById('userName').value;
var userPw = document.getElementById('userPw').value;

これは、入力フィールドの値を取得する正しい方法です。

1
Abu Haneefah