gpt4 book ai didi

javascript - JSON 对象数组,用于在本地临时存储中存储表单数据(PhoneGap 项目)

转载 作者:行者123 更新时间:2023-11-28 01:42:06 25 4
gpt4 key购买 nike

我正在使用 PhoneGap 构建数据采集系统。 .我正在尝试使用 JSON 将我的表单数据临时存储在本地存储中,在我关闭并重新打开应用程序(按下“获取数据”按钮后)后数据应该是可见的,但是在我关闭它之后只有最后输入的记录是可见的

这是我的代码

   <!DOCTYPE html>
<html>
<head>
<title>Household Profile DB storage</title>

<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1,width=device-width" />


<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/table.css">


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>

<script type="text/javascript" src="js/iscroll.js"></script>

<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
persistData(homeId,owner,gramaND,contactNo,address,race);
}
function saveLocal(form){
if (window.localStorage) {

var fhomeId = form.homeId.value,
fowner = form.owner.value,
fgramaND = form.gramaND.value,
fcontactNo= form.contactNo.value,
faddress = form.address.value,
frace = form.race.value;




alert("hi");
var highscores = [{"homeId": fhomeId,
"owner":fowner,
"gramaND":fgramaND,
"contactNo":fcontactNo,
"address":faddress,
"race":frace}];
localStorage.setItem("highscores",JSON.stringify(highscores));

alert("The data has been stored successfully.");
} else {
alert("Your Browser does not support LocalStorage.");
}
}

function readLocal(){
if (window.localStorage) {

var scores =[];
//Get the highscores object
scores = localStorage.getItem("highscores");
scores = JSON.parse(scores);
for (i=0;i<scores.length;i++){



var text = "homeId :"+scores[i].homeId +"<br>"+
"owner:"+ scores[i].owner+"<br>"+
"address"+scores[i].address +"<br>"+
"gramaND"+scores[i].gramaND +"<br>"+
"contactNo"+scores[i].contactNo+"<br>" +
'<Button value="DELETE" onclick="'+scores.splice(i, 0)+'><>/Button>';


var tbodyx = document.getElementsByTagName("tbody");
var tr=document.createElement("TR");
var td=document.createElement("TD");
td.innerHTML = text;
tr.appendChild(td);
tbody.appendChild(tr);


}
}
}
</script>

</head>

<body>
<div data-role="page" id="page1">
<!--/header-->
<div data-role="header" data-position="inline" data-theme="b">

<a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
<h1>Household Profile</h1>
<a href="index.html" data-icon="home">Menu</a>

</div>
<!--/header-->

<div id="wrapper">
<form id="userInput" action ="" method="GET">
<div data-role="content">


<div data-role="fieldcontain">
<label > Home ID </label>
<input class="inputClass" id="homeId" placeholder="H0001" value="" data-mini="true" type="text">
</div>


<div data-role="fieldcontain">
<label > Owner </label>
<input class="inputClass" id="owner" placeholder="Aberathne" value="" type="text">
</div>


<div data-role="fieldcontain">
<label class="select">GramaNiladhari Division</label>
<select class="inputClass" id="gramaND">
<option value="GramaNiladhari Division 1">GramaNiladhari Division 1</option>
<option value="GramaNiladhari Division 2">GramaNiladhari Division 2</option>
<option value="GramaNiladhari Division 3">GramaNiladhari Division 3</option>
<option value="GramaNiladhari Division 4">GramaNiladhari Division 4</option>
</select>
</div>


<div data-role="fieldcontain">
<label > Contact No </label>
<input class="inputClass" id="contactNo" placeholder="071-9545-073" value="" type="number">
</div>


<div data-role="fieldcontain">
<label >Address:</label>
<textarea cols="40" rows="8" class="inputClass" id="address"></textarea>
</div>


<div class="ui-block-a"><button type="submit" data-theme="d">Location in a Map</button></div>


<div data-role="fieldcontain">
<label >Race</label>
<select class="inputClass" id="race">
<option value=" Sinhalese"> Sinhalese</option>
<option value=" Sri Lanka Tamils"> Sri Lanka Tamils</option>
<option value=" Moors"> Moors</option>
<option value=" Indian Tamils "> Indian Tamils </option>
<option value=" Malays "> Malays </option>
<option value=" Burghers "> Burghers </option>

</select>
</div>

<input class="buttonClass" type="button" value="Insert Data" onclick="saveLocal(this.form);">

</div>
</form>
</div>

<input class="buttonClass" type="button" value="get Data" onclick="readLocal();">
<!-- <p id="dhomeId"></p>
<p id="downer"></p>
<p id="dgramaND"></p>
<p id="dcontactNo"></p>
<p id="daddress"></p>
<p id="drace"></p>-->



<table border="1">
<tbody id="tbody">
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
</tbody>
</table>




</div>


</body>
</html>

我还需要扩展我的代码来编辑和删除本地存储中的记录。

最佳答案

当然它应该只显示最后输入的 JSON。您不是在附加分数,而是在替换它。当你执行命令时

localStorage.setItem("highscores",JSON.stringify(highscores));

您刚刚替换 localStorage 上以前的highscores 值。我在您的代码中看不到任何 append 机制。您需要做的是检索以前的 JSON 数据,将新的高分与以前的数据相加,然后再次保存。

关于javascript - JSON 对象数组,用于在本地临时存储中存储表单数据(PhoneGap 项目),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25346771/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com