Hello,

I'm a beginner at JavaScript and for a school project, I need to build a mobile web application using HTML, CSS and JavaScript. I realise what I plan to do would be better off using PHP, but since we haven't learnt that yet I'll have to stick to JS for now. For this application, I need to store data using forms and local storage. The user will add people to a locally stored "database" (for lack of better words), and can on a different form add items that can be bound to one person or several persons.

I've tried to do as much research and attempts as possible, but am now stumped. This is where I'm at now: The persons should be stored as objects, and I've been advised to have the items stored as arrays. When the user adds a new person, a new object should be created. I just can't figure out how exactly to do that. I've been unable to find the solution that fits my problem. I haven't even started on the array part yet, since I'm stuck on adding the object. Sounds simple enough when reading about it, but still I have some problems with it. Therefore I turn to you for help.

So, the Big Question: How do I successfully create new objects that are stored in local storage, when I click an Add button, while not overwriting each other?

(Please note that more form fields and thus more object properties will be added, for testing purpose I've only been working with the name property.)

I've been lurking a bit on this forum, time for me now to ask the question and hopefully someone else can benefit from this as well. =D

Thank you in advance.


HTML Code:
<form>
	<input type="text" id="name" name="name" /><br />
		<div id="add" style="background-color: green; margin: 5px; outline: 2px solid black; padding: 5px; text-align: center; width: 100px;">Add</div>
		<div id="list" style="background-color: beige; margin: 5px; outline: 2px solid black; padding: 5px; text-align: center; width: 100px;">List</div>
		<div id="feedback"></div>
</form>


JavaScript:
Code:
var name_element = $("#name").val();

person = {
	name: name_element
	};

$("#add").click(function(name) {
	console.log(person.name); // test, returns blank
	localStorage.setItem("Recipient", person);
	document.forms[0].reset()	// clear input on first form
	return false;
});

$("#list").click(function() {
	$("#feedback").append(localStorage.getItem("Recipient", person)); // returns with "[object Object]" instead of a name
	// $("#feedback").prepend(person.name);
	console.log(person); // test, returns with "Object {name: ""}" instead of a name
});