数组未保存在本地存储中

时间:2016-01-26 07:45:14

标签: javascript arrays forms object

我试图保存Form(未经验证的)详细信息并将其保存在JAVASCRIPT中的localStorage中,我已经这样做了。但是当我重新加载浏览器并单击提交时,之前保存的值不会保存在'数组中。并更换空白表格。我知道数组和对象(var client_Array = [];var clientObj = {};)在我加载浏览器时会再次初始化,但是数组不应该保留旧细节的副本(比如在索引0中)并推送空白或索引1中的新副本?现在似乎没有发生这种情况。 此代码仅适用于chrome并且不在FF中工作(单击“加载&btn”时未显示控制台中的详细信息)。 ...请帮忙。提前谢谢。

<head>
<style>
form {
    width:300px;
}
input {
    border:1px solid #FF9933;
    width:225px;
    height:24px;
    margin-bottom:7px;
}
textarea {
    border:1px solid #FF9933;
    width:225px;
    height:100px;
}
.fbtn {
    width:80px;
    margin-top:10px;
    float:right;
    text-align:center;
    color:#FF6600;
    font-weight:bold;
}
</style>
</head>
<body>
<form>
  <table border="0">
    <tr>
      <td width="64">Name</td>
      <td width="8">:</td>
      <td><input type="text" id="inp_name" ></td>
    </tr>
    <tr>
      <td>Email</td>
      <td>:</td>
      <td><input type="text" id="inp_email" ></td>
    </tr>
    <tr>
      <td>Phone</td>
      <td>:</td>
      <td><input type="text" id="inp_phone"></td>
    </tr>
    <tr>
      <td>Address</td>
      <td>:</td>
      <td><textarea id="inp_address"></textarea>
      </td>
    </tr>
  </table>
  <input type="button" onClick="sendDet()" class="fbtn" value="Submit">
  <br>
  <br>
  <br>
  <input type="button" onClick="loadit()" class="fbtn" value="Load">
  <br>
  <br>
  <input type="reset" class="fbtn"  value="reset">
</form>
<script>

var client_Array = [];
var clientObj = {};



function sendDet(){
var clientObj = {
 name : document.getElementById('inp_name').value,
  email : document.getElementById('inp_email').value,
   phone : document.getElementById('inp_phone').value,
    address : document.getElementById('inp_address').value
}

client_Array.push(clientObj)

localStorage.setItem("client", JSON.stringify(client_Array))


}

function loadit(){
var show = JSON.parse(localStorage.getItem("client")) 
console.log(show)
}


</script>
</body>

1 个答案:

答案 0 :(得分:0)

您应该使用client_Array.unshift而不是client_Array.push。 push在数组的末尾添加项目,而unshift将它添加为第一个元素(索引0 BTW,而不是1)