编辑 localStorage 用户？答案

【问题标题】：Edit localStorage user?编辑 localStorage 用户？
【发布时间】：2014-10-03 18:57:33
【问题描述】：

您好，我正在尝试使用 localStorage 编辑用户，但似乎无法将我的用户信息的值解析为“EditUser”表单的输入字段。

我已经读到应该使用 set/getItem()，但是我尝试使用我的 User:index 没有成功。

如何编辑通过 localStorage 登录的当前用户？

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();

【问题讨论】：

标签： javascript jquery html local-storage

【解决方案1】：

你有几件事错了。

e_mail: this.e_mail.value

没有电子邮件字段。这会引发错误并使您的表单提交处理程序不会阻止默认值。

顺便说一句 - 像这样将用户信息存储在 LocalStorage 中可能不是一个好主意。

【讨论】：