I'm working on web app that basically allows the user to enter data about a product and then add it to the web page in a table. I would like to save this information in a file of some kind (just locally on my computer, for now) so that the user can open his or her previously-created entries.
This is a stripped-down version of the html page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<table id="itemsTable">
<tr>
<th>Date Added</th>
<th>Item Description</th>
</tr>
</table>
</div>
<div id="itemInput">
<h3>Add Item</h3>
Date Added:<input type="date" id="dateAdded">
Description:<input type="text" id="description">
<input type="button" value="Add Row" onclick="addRowFunction();">
<input type="button" value="Delete Selected" onclick="deleteRowFunction();">
</div>
</html>
I then have some javascript to evaluate and interpret the data, client-side. I'm looking for ideas to store the recorded entries (locally). Not only that, but I'm looking for suggestions as to how to delete information that's been stored as well.
EDIT:
As per your request, here is a snippet of my JS code:
//Striped-down object
function Item (dateListed, description) {
this.dateListed = dateListed;
this.description = description;
}
//Simple function to take data from form, create object, add to table.
function addItem() {
var dateAdded = document.getElementById('dateAdded').value;
var description = document.getElementById('description').value;
// I realize that using an object in this striped-down version is kind of
// unnecessary, but in the full code it makes more sense.
var newItem = new Item(dateAdded, description);
table = document.getElementById('itemsTable');
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = newItem.dateListed;
cell2.innerHTML = newItem.description;
}
