Edit localStorage user?

Question

Hello i am trying to edit the user with localStorage, but can't seem to parse the value of my user info to the input field of my "EditUser" form.

I have read that set/getItem() should be used, but have tried with my User:index without success.

How can i EDIT the current user that has logged in via localStorage?

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

Answer 1

You have a couple of things wrong.

e_mail: this.e_mail.value

There is no email field. This throws an error and makes your form submit handler not prevent default.

Btw - it may not be a good idea to store user info in LocalStorage like that.