2014-10-02 135 views
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(); 

回答

1

你有幾件事情是錯誤的。

e_mail: this.e_mail.value 

沒有郵件字段。這會引發錯誤,並使表單提交處理程序不會阻止默認設置。

順便說一句 - 將用戶信息存儲在LocalStorage中可能不是一個好主意。