LiberumMicroservices/personLS.html

## personLS.html
<body>
	<br><table id="pers" border="1">
	<tr bgcolor="lightgray"><td>id</td><td>fName</td><td>lName</td><td>age</td></tr>
	</table><br>

	id  <input type = "text" id="id"  /><br>
    	fName <input type = "text" id="fName" /><br>
    	lName  <input type = "text" id="lName"  /><br>
    	age <input type = "text" id="age"/><br><br>

	<input type = "button" value="Clear" onclick="clearTable()"/><br><br><br>

  	<input type = "button" value="Save JSON" onclick="jsonToLS()"/>
	<input type = "button" value="Load JSON" onclick="jsonToTable()"/><br><br>

	<input type = "button" value="Save XML" onclick="xmlToLS()"/>
	<input type = "button" value="Load XML" onclick="xmlToTable()"/><br><br>

	<input type = "button" value="Save CSV" onclick="csvToLS()"/>
	<input type = "button" value="Load CSV" onclick="csvToTable()"/>

  <script>

			var pId;
			var pFName;
      			var pLName;
			var pAge;
			var person;

			//JSON
			function jsonToTable()
			{

				var getPers = localStorage.getItem("json");
				var dataGson = JSON.parse(getPers);
				fAddDom(dataGson["id"], dataGson["fName"], dataGson["lName"], dataGson["age"]);
			}

			function jsonToLS()
			{
				getData();
				var serialObj = JSON.stringify(person);
				localStorage.setItem("json", serialObj);
			}

			// XML
			function xmlToTable()
			{
				var id;
				var fName;
				var lName;
				var age;

				var parseXml;
				var getPers = localStorage.getItem("xml");
				parseXml = function(xmlStr)
				{
					return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
				};
				var xml = parseXml(getPers)
				id = xml.getElementsByTagName('id')[0].firstChild.data;
				fName = xml.getElementsByTagName('fName')[0].firstChild.data;
				lName = xml.getElementsByTagName('lName')[0].firstChild.data;
				age = xml.getElementsByTagName('age')[0].firstChild.data;

				fAddDom(id, fName, lName, age);
			}

			function xmlToLS()
			{
				getData();

				var oSerializer = new XMLSerializer();
				var doc = document.implementation.createDocument("", "", null);
				var p = doc.createElement("person");
				var xmlId = doc.createElement("id");
				var xmlFName = doc.createElement("fName");
				var xmlLName = doc.createElement("lName");
				var xmlAge = doc.createElement("age");

				xmlId.innerHTML = pId;
				xmlFName.innerHTML = pFName;
				xmlLName.innerHTML = pLName;
				xmlAge.innerHTML = pAge;

				p.appendChild(xmlId);
				p.appendChild(xmlFName);
				p.appendChild(xmlLName);
				p.appendChild(xmlAge);

				doc.appendChild(p);

				var sXML = oSerializer.serializeToString(doc);
				localStorage.setItem("xml", sXML);
			}


			//CSV
			function csvToTable()
			{

				var getPers = localStorage.getItem("csv");
				var dataCSV = getPers.split(',');
				fAddDom(dataCSV[0], dataCSV[1], dataCSV[2], dataCSV[3]);
			}

			function csvToLS()
			{
				getData();
				var stringCSV = pId + "," + pFName + "," + pLName + "," + pAge;
				localStorage.setItem("csv", stringCSV);
			}

			// SERVICE

			function clearTable()
			{
				var table = document.getElementById("pers");
				while (table.rows.length > 1)
				{
					table.deleteRow(1);
				}
			}

			function fAddDom(did, dfName, dlName, dage)
			{
				var myDocument = document;
				var dTable = document.getElementById("pers");

				var dTr = document.createElement("tr");
				dTable.appendChild(dTr);

				var dTdId = document.createElement("td");
				var dTdFName = document.createElement("td");
				var dTdLName = document.createElement("td");
				var dTdAge = document.createElement("td");

				dTdId.innerHTML = did;
				dTdFName.innerHTML = dfName;
				dTdLName.innerHTML = dlName;
				dTdAge.innerHTML = dage;

				dTr.appendChild(dTdId);
				dTr.appendChild(dTdFName);
				dTr.appendChild(dTdLName);
				dTr.appendChild(dTdAge);
			}

      function getData()
			{
        pId  = parseInt( id.value);
        pFName    = fName.value;
        pLName  =  lName.value;
	pAge  = parseInt( age.value);

		person =
		{
			id: pId,
			fName: pFName,
			lName: pLName,
			age: pAge
		};
      }

        </script>
</body>
	<body>
	<br><table id="pers" border="1">
	<tr bgcolor="lightgray"><td>id</td><td>fName</td><td>lName</td><td>age</td></tr>
	</table><br>

	id <input type = "text" id="id" /><br>
	fName <input type = "text" id="fName" /><br>
	lName <input type = "text" id="lName" /><br>
	age <input type = "text" id="age"/><br><br>

	<input type = "button" value="Clear" onclick="clearTable()"/><br><br><br>

	<input type = "button" value="Save JSON" onclick="jsonToLS()"/>
	<input type = "button" value="Load JSON" onclick="jsonToTable()"/><br><br>

	<input type = "button" value="Save XML" onclick="xmlToLS()"/>
	<input type = "button" value="Load XML" onclick="xmlToTable()"/><br><br>

	<input type = "button" value="Save CSV" onclick="csvToLS()"/>
	<input type = "button" value="Load CSV" onclick="csvToTable()"/>

	<script>

	var pId;
	var pFName;
	var pLName;
	var pAge;
	var person;

	//JSON
	function jsonToTable()
	{

	var getPers = localStorage.getItem("json");
	var dataGson = JSON.parse(getPers);
	fAddDom(dataGson["id"], dataGson["fName"], dataGson["lName"], dataGson["age"]);
	}

	function jsonToLS()
	{
	getData();
	var serialObj = JSON.stringify(person);
	localStorage.setItem("json", serialObj);
	}

	// XML
	function xmlToTable()
	{
	var id;
	var fName;
	var lName;
	var age;

	var parseXml;
	var getPers = localStorage.getItem("xml");
	parseXml = function(xmlStr)
	{
	return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
	};
	var xml = parseXml(getPers)
	id = xml.getElementsByTagName('id')[0].firstChild.data;
	fName = xml.getElementsByTagName('fName')[0].firstChild.data;
	lName = xml.getElementsByTagName('lName')[0].firstChild.data;
	age = xml.getElementsByTagName('age')[0].firstChild.data;

	fAddDom(id, fName, lName, age);
	}

	function xmlToLS()
	{
	getData();

	var oSerializer = new XMLSerializer();
	var doc = document.implementation.createDocument("", "", null);
	var p = doc.createElement("person");
	var xmlId = doc.createElement("id");
	var xmlFName = doc.createElement("fName");
	var xmlLName = doc.createElement("lName");
	var xmlAge = doc.createElement("age");

	xmlId.innerHTML = pId;
	xmlFName.innerHTML = pFName;
	xmlLName.innerHTML = pLName;
	xmlAge.innerHTML = pAge;

	p.appendChild(xmlId);
	p.appendChild(xmlFName);
	p.appendChild(xmlLName);
	p.appendChild(xmlAge);

	doc.appendChild(p);

	var sXML = oSerializer.serializeToString(doc);
	localStorage.setItem("xml", sXML);
	}


	//CSV
	function csvToTable()
	{

	var getPers = localStorage.getItem("csv");
	var dataCSV = getPers.split(',');
	fAddDom(dataCSV[0], dataCSV[1], dataCSV[2], dataCSV[3]);
	}

	function csvToLS()
	{
	getData();
	var stringCSV = pId + "," + pFName + "," + pLName + "," + pAge;
	localStorage.setItem("csv", stringCSV);
	}

	// SERVICE

	function clearTable()
	{
	var table = document.getElementById("pers");
	while (table.rows.length > 1)
	{
	table.deleteRow(1);
	}
	}

	function fAddDom(did, dfName, dlName, dage)
	{
	var myDocument = document;
	var dTable = document.getElementById("pers");

	var dTr = document.createElement("tr");
	dTable.appendChild(dTr);

	var dTdId = document.createElement("td");
	var dTdFName = document.createElement("td");
	var dTdLName = document.createElement("td");
	var dTdAge = document.createElement("td");

	dTdId.innerHTML = did;
	dTdFName.innerHTML = dfName;
	dTdLName.innerHTML = dlName;
	dTdAge.innerHTML = dage;

	dTr.appendChild(dTdId);
	dTr.appendChild(dTdFName);
	dTr.appendChild(dTdLName);
	dTr.appendChild(dTdAge);
	}

	function getData()
	{
	pId = parseInt( id.value);
	pFName = fName.value;
	pLName = lName.value;
	pAge = parseInt( age.value);

	person =
	{
	id: pId,
	fName: pFName,
	lName: pLName,
	age: pAge
	};
	}

	</script>
	</body>