javascript - 如何阻止用户使用我的本地存储中已存在的相同用户名？

Question

var labelsarray = document.getElementsByTagName("label");
var inputsarray = document.getElementsByTagName("input");
var array = [];
function agecal() {
	var Bdate = inputsarray[4].value;
	var Bday = +new Date(Bdate).getFullYear();
	var age = (new Date().getFullYear() - Bday);
	inputsarray[5].value = age;
}


function subm() {
	var users = {
		FirstName: inputsarray[0].value,
		LastName: inputsarray[1].value,
		UserName: inputsarray[2].value,
		Password: inputsarray[3].value,
		DateofBirth: inputsarray[4].value,
		Age: inputsarray[5].value,
		Purpose: ""
	};
	
	if (inputsarray[6].checked === true) {
		users.Gender = "Male";
	} else if (inputsarray[7].checked === true) {
		users.Gender = "Female";
	}
	
	if (inputsarray[8].checked === true) users.Purpose += " Storing Apps";
	if (inputsarray[9].checked === true) users.Purpose += " Storing Sites";
	if (inputsarray[10].checked === true) users.Purpose += " Fun";
	
	array.push(users);
	localStorage.setItem("Users Data: ", JSON.stringify(array));

	var item = localStorage.getItem("Users Data: ");
	var arrayobjfromls = JSON.parse(item);
	for (var i = 0; i < arrayobjfromls.length; i++) {
		if (inputsarray[2].value === arrayobjfromls[i].UserName) {
			alert("This username is already in use. Please try another.");
			localStorage.removeItem(arrayobjfromls[i]);
			
		}
	}
}

<div>
	<center>
		<form action="javascript:void(0);" method="post" onsubmit="subm();">
			<label for="fname">First Name:</label>&emsp;
			<input type="text" id="fname" />
			<br/>
			<label for="lname">Last Name:</label>&emsp;
			<input type="text" id="lname" />
			<br/>
			<label for="uname">User Name:</label>&emsp;
			<input type="text" id="uname" />
			<br/>
			<label for="pass">Password:</label>&emsp;&ensp;&nbsp;
			<input type="password" id="pass" />
			<br/>
			<label for="dob">Date of Birth:</label>&emsp;&emsp;&nbsp;
			<input type="date" id="dob" onchange="agecal();" />
			<br/>
			<label>Age:</label>&emsp;&emsp;&emsp;&emsp;&emsp;
			<input type="text" id="age" disabled="disabled" />
			<br/>
			<span>Gender:</span>&emsp;&emsp;&emsp;&emsp;&ensp;
			<input type="radio" name="gender" id="male" />
			<label for="male">Male</label>
			<input type="radio" name="gender" id="female" />
			<label for="female">Female</label>
			<br/>
			<p>For what purpose(s) you are making account?</p>
			<input type="checkbox" id="app" name="purpose" value="storingapps" />
			<label for="app">Storing Apps</label>
			<input type="checkbox" id="site" name="purpose" value="storingsites" />
			<label for="site">Storing Sites</label>
			<input type="checkbox" id="fun" name="purpose" value="fun" />
			<label for="fun">Fun</label>
			<br/>
			<input type="submit" value="Submit" class="button" />
		</form>
	</center>
</div>

请帮助我，我想通过显示警报来阻止用户使用本地存储中已经存在的用户名，而且我不想将数据发送到本地存储，其中用户名与已经存在的数据相同在我的本地存储中...以便我的本地存储仅包含那些具有不同用户名的对象。

Answer 1

你已经在检查这个了；您只是在添加新用户之后才这样做。先做检查:

var item = localStorage.getItem("Users Data: ");
var arrayobjfromls = JSON.parse(item);
var found = false;
for (var i = 0; i < arrayobjfromls.length; i++) {
    if(users.UserName === arrayobjfromls[i].UserName) {
        found = true;
        break;
    }
}


if ( found ) {
    alert("This username is already in use. Please try another.");
} else {
    array.push( users );
    localStorage.setItem("Users Data: ", JSON.stringify(array));
}