Stackoverflow に関する最初の投稿を質問にしたくありませんでしたが、コーディングは初めてで、少し助けが必要です。編集できるように、フォーム フィールドに localStorage データを入力しようとしています。私は一日中これにいました。コードを適切に投稿する方法がわからないので、ここに行きます。
「「1」のプロパティを読み取れません」というエラーがスローされ続けます。フォームに入力しましたが、「[object HTMLInputElement]」で埋められました。
$("#save").click(function (e) {
alert("Name Has Been Saved");
e.preventDefault();
var data = $("#form").serializeArray();
var id = Math.floor(Math.random() * 10000001);
var item = {};
item.first = ["First:", $("#first").val()];
item.last = ["Last:", $("#last").val()];
$.each(data, function (i, obj) {
localStorage.setItem(id, JSON.stringify(item));
});
});
//Fill with data from localstorage to edit
function editItem(){
var value = localStorage.getItem(this.key);
var item = JSON.parse(value);
$("#form").show(function () {
$("#userDiv").hide(function () {
});
});
$("#first").val(item.first[1]);
$("#last").val(item.last[1]);
}
});
});
function deleteItem() {
var ask = confirm("Are you sure you want to delete this contact?");
if (ask) {
localStorage.removeItem(this.key);
alert("Contact was deleted!!");
window.location.reload();
} else {
alert("Contact was NOT deleted.");
}
}
$("#clear").click(function (e) {
e.preventDefault();
if(localStorage.length === 0){
alert("There Is No Info To Clear")
}else{
localStorage.clear();
alert("All Names Have Been Deleted!");
window.location.reload();
return false;
}
});
});
});
<div data-role="page" id="home" data-theme="b">
<form id="form">
<label>First<input type="text" name="First" id="first"></label>
<label>Last<input type="text" name="Last" id="last"></label><br>
<input type="submit" value="Save" id="save"/>
<input type="submit" value="Clear" id="clear"/>
<input type="submit" value="Show" id="show"/>
</form>
<ul id="userDiv">
<a href="#home" data-role="button" data-mini="true" data-inline="true">to form</a>
</ul>
</div>