テーブルのユーザーの姓と名字を保存する

Question

私は自分のウェブサイトの登録とログインを作成しました。ユーザーの姓と名を格納するテーブルを作成しましたが、 。で、テーブル内の1人のユーザーよりも、私はテーブルを更新するたびに、それは最初のユーザーを毎回代わる新しいユーザーがログイン

画像を表示するには、リンクをクリックしてください：

https://imgur.com/a/CFMC8

/*-- REGISTER --*/ 

function storeUserDetail(){ 
    var fNameInput = document.getElementById("firstNameInput").value; 
    var lNameInput = document.getElementById("lastNameInput").value; 
    var uNameInput = document.getElementById("userNameInput").value; 
    var pWordInput = document.getElementById("passWordInput").value; 
    if(fNameInput === ""){ 
     document.getElementById("regMessage").innerHTML = "<span 
     class='error'>Please enter your First Name.</span>"; 
    } 
    else if(lNameInput === ""){ 
     document.getElementById("regMessage").innerHTML = "<span 
     class='error'>Please enter your Last Name.</span>"; 
    } 
    else if(uNameInput === ""){ 
     document.getElementById("regMessage").innerHTML = "<span 
     class='error'>Please enter your Username.</span>"; 
    } 
    else if(pWordInput === ""){ 
     document.getElementById("regMessage").innerHTML = "<span 
     class='error'>Please enter your Password.</span>"; 
    } 
    else { 
     var storeDetails = {}; 
     storeDetails.FirstName = 
     document.getElementById("firstNameInput").value; 
     storeDetails.LastName = 
     document.getElementById("lastNameInput").value; 
     storeDetails.Username = 
     document.getElementById("userNameInput").value; 
     storeDetails.Password = 
     document.getElementById("passWordInput").value; 
     localStorage[storeDetails.Username] = JSON.stringify(storeDetails); 
     window.location.replace("http://localhost/login.php"); 
    }      
} 

/*-- LOGIN -- */ 

function loginUser(){ 
    var Username = document.getElementById("userNameInput").value; 
    var Password = document.getElementById("passWordInput").value; 
    if(Username === ""){ 
     document.getElementById("logMessage").innerHTML = "<span 
     class='error'>Please enter your Username.</span>";     
    } 
    else if(Password === ""){ 
     document.getElementById("logMessage").innerHTML = "<span 
     class='error'>Please enter your Password.</span>";  
    } 
    else { 
     if(localStorage[Username] === undefined) { 
     document.getElementById("logMessage").innerHTML = "<span 
     class='error'>Username Incorrect. Please try again.</span>"; 
     return; 
    } 
    else { 
     var storeDetails = JSON.parse(localStorage[Username]); 
     if(Password === storeDetails.password) { 
      localStorage.loggedInUserName = storeDetails.Username; 
      window.location.replace("http://localhost/game.php"); 
     } 
     else{ 
      document.getElementById("logMessage").innerHTML = "<span 
      class='error'>Password Incorrect. Please try again.</span>"; 
     } 
    } 
} 

/* TABLE */ 

function inputUserInfo(){ 
    var storeDetails = JSON.parse(localStorage[localStorage.LoggedInUser]); 
    var table = document.getElementById("rankTable"); 
    var row = table.insertRow(); 
    var firstNameCell = row.insertCell(0); 
    var lastNameCell = row.insertCell(1); 
    firstNameCell.innerHTML = storeDetails.FirstName; 
    lastNameCell.innerHTML = storeDetails.LastName; 
} 

Answer 1

ローカルストレージを使用して登録およびログインシステムを作成することはできません。ローカルストレージは、ユーザ自身のブラウザにの値を保存するだけで、、つまり「ローカル」に保存されます。サーバーはそれらについて知らず、他のユーザーはそれらについて知らず、ユーザーがブラウザーの履歴を完全にクリアするとすべてクリアされます。そして、各キーには1つの値しかありません。と明日はusername = "Laura"と書いておけば、LauraはSarahを上書きします。usernameという2つの異なるものをブラウザに持たせることはできません。

ローカルストレージは、登録およびログインシステムには適していません。これは、個々のユーザーのものをキャッシュする場合にのみ適しています。たとえば、処理中/未送信のメッセージをローカルストレージに保存して、ページの更新時にユーザーがメッセージを失わないようにすることができます。