我试图保存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>
答案 0 :(得分:0)
您应该使用client_Array.unshift而不是client_Array.push。 push在数组的末尾添加项目,而unshift将它添加为第一个元素(索引0 BTW,而不是1)