www.webdeveloper.com
Results 1 to 3 of 3

Thread: Creating new JS objects from form for local storage

  1. #1
    Join Date
    Dec 2013
    Posts
    1

    Creating new JS objects from form for local storage

    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
    });

  2. #2
    Join Date
    Mar 2009
    Posts
    467
    Look at the documentation for JSON.parse and JSON.stringify. These will allow you to turn simple arrays and objects into strings and back again. You can turn your data into a string suitable for recording in localStorage.

  3. #3
    Join Date
    Mar 2012
    Posts
    202
    The best way to create an object is to first define the new object's structure. You can do so like this:

    Code:
    var PersonObject = function(FirstName, LastName) {
    this.FirstName = FirstName;
    this.LastName = LastName;
    }
    You can then create a new person object like this:

    Code:
    var PersonO = new PersonObject("John", "doe");
    Since you're more than likely going to be storing more than one person in the database, you'll probably want to save them in an array. A good approach would be to load the objects from localStorage to populate the array instantly. Do some research on arrays (like pop, push, etc) and especially loops. Here is some code which will hopefully help you understand a bit more:

    Code:
    var PersonsArray = []; // Creates a new array
    
    // Load the array from localStorage if it exists
    if(localStorage.PersonsArray) PersonsArray = localStorage.PersonsArray;
    
    console.log(PersonsArray); // Should report currently stored objects
    
    var SavePersonsArray = function() { localStorage.PersonsArray = PersonsArray; }
    
    var PersonObject = function(FirstName, LastName) {
    this.FirstName = FirstName;
    this.LastName = LastName;
    }
    
    PersonsArray.push(new PersonObject("John","Doe")); // Creates a new person object and adds it to the array
    PersonsArray.push(new PersonObject("Jane","Doe"));
    SavePersonsArray(); // Saves the array to localStorage
    Last edited by Gray1989; 12-29-2013 at 11:53 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles