JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<fieldset>
    <legend>Personalcontacts</legend>
    <div>
        <label for="name">Name:<br></label><input type="text" id="name"/>
    </div><br>
    <div>
        <label for="address">Address:<br></label><input type="text" id="address"/>
    </div><br>
    
<div>
        <label for="email">Email:<br></label><input type="text" id="email"/>
    </div>  <br>

        <button type="button" id="saveBtn">Save<br> </button>
        </fieldset>
    <fieldset><br><br>
        <legend>List of Contacts</legend>
        <div id="output"></div><br><br>
    </fieldset>

JavaScript

console.clear();

    var data=[];
       console.log("There are " + data.length + "Objects in the Array.");
       console.log(data);
var contacts={
    Name:"Ray",
    Address:"Parkwood dr.",
    Email:"[email protected]"
}
data.push(contacts);
contacts={
    Name:"John",
    Address:"Marsh Lane",
    Email:"[email protected]"
}
data.push(contacts);
contacts={
    Name:"Steve",
    Address:"Imhoff Ave",
    Email:"[email protected]"
}
data.push(contacts);

var myData=JSON.stringify(data);
console.log(typeof(myData));
console.log("myData = " + myData);
console.log(' ');

localStorage.setItem('data',myData);

var DATA =localStorage.getItem('data');
console.log(typeof(DATA));
console.log("DATA = " + DATA);
console.log(' ');

var myDATA=JSON.parse(DATA);
console.log(typeof(myDATA));
console.log(myDATA.cosntructor);
console.log(myDATA);
console.log(' ');

localStorage.removeItem('data');

DATA=window.localStorage.getItem('data');
console.log("DATA = " + DATA);