1
你好,我試圖用localStorage編輯用戶,但似乎無法解析我的用戶信息的值到我的「EditUser」窗體的輸入字段。編輯localStorage用戶?
我讀過set/getItem()應該使用,但已經嘗試用我的用戶:索引沒有成功。
我該如何編輯通過localStorage登錄的當前用戶?
小提琴例如 http://jsfiddle.net/f3dsfpob/6/
HTML
<form id="userReg">
<div class="item text">
<label>Username:</label>
<div class="field">
<input type="text" name="user_name" id="nameUSER" />
</div>
</div>
<div class="item text">
<label>Password:</label>
<div class="field">
<input type="password" name="password" />
</div>
</div>
<div class="button-wrapper">
<div class="item button button-default">
<div class="field">
<input type="submit" id="registerUser" value="Register" />
</div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<fieldset name="Login" id="logUser">
<legend>Login</legend>
<input type="text" name="first_name" id="firstName" />
<br />
<input type="password" id="passWord" />
<br />
<div class="item button">
<div class="field">
<input type="button" id="logIN" value="login" />
</div>
</div>
<p id="result"></p>
<p id="negative"></p>
</fieldset>
<div id="form">
<form id="EditUser">
<table class="form">
<tr>
<td>
<input type="text" name="changeUser" placeholder="username" />
</td>
</tr>
<tr>
<td>
<input type="text" name="changePass" placeholder="password" />
</td>
</tr>
<tr>
<td colspan="2" class="button">
<input id="formSubmit" type="button" value="Undo" onClick="dbClear()" />
<input id="formSubmit" type="button" value="Change" onClick="dbEdit()" />
</td>
</tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>
<p id="loginResult"></p>
<p id="negative"></p>
<p id="registerResult"></p>
JAVASCRIPT
var User = {
index: window.localStorage.getItem("User:index"),
$form: document.getElementById("userReg"),
$button_register: document.getElementById("registerUser"),
$button_login: document.getElementById("logIN"),
init: function() {
if (!User.index) {
window.localStorage.setItem("User:index", User.index = 1);
}
User.$form.addEventListener("submit", function (e) {
var entry = {
id: parseInt(this.id_entry.value),
user_name: this.user_name.value,
password: this.password.value,
e_mail: this.e_mail.value
};
if (entry.id == 0) {
User.storeAdd(entry);
}
e.preventDefault();
}, true);
User.$button_login.addEventListener("click", function (e) {
for(var i = 1; i < User.index; i++) {
var key = "User:" + i;
var entry = JSON.parse(localStorage[key]);
console.log("entry : ", key, entry);
if (document.getElementById("firstName").value == entry.user_name && document.getElementById("passWord").value == entry.password) {
alert("Logged in as"+" "+entry.user_name);
document.getElementById("loginResult").innerHTML = "Logged in as"+" "+entry.user_name;
console.log("entry : ", key, entry);
LoginUser();
e.preventDefault(e);
}
else
{
document.getElementById("negative").innerHTML = "Username or Password does not match";
}
}
});
},
storeAdd: function (entry) {
entry.id = User.index;
window.localStorage.setItem("User:index", ++User.index);
window.localStorage.setItem("User:" + entry.id, JSON.stringify(entry));
document.getElementById("registerResult").innerHTML = "Registration succesful";
return;
}
};
User.init();