JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<form name="test" method="post" action="javascript:storage()">
 <input name='surname' id="surname" value='surname'>
 <input name='lastname' id="lastname" value='lastname'>

     <button id='btnTest' value="test">Test</button>
</form>
<div id="tabletest"></div>

JavaScript

function storage(){
    var surname = document.getElementById('surname').value;
    var lastname = document.getElementById('lastname').value;
    var person = {
        "surname" : surname,
        "lastname" : lastname,
        "dateofbirth" : "01-01-1990"    
    };

    var people = localStorage.getItem('people');
    if(people === null) {people = [];}
    else {people = JSON.parse(people);}
    people.push(person);    
    var peopleToStore = JSON.stringify(people);
    localStorage.setItem('people', peopleToStore);

    var people = localStorage.getItem('people');
    people = JSON.parse(people);

    var tabletest = document.getElementById('tabletest');
    for(var i=0;i<people.length;i++)
    {
        if(i>0)
        {
         tabletest.innerHTML += "<br/>";   
        }
        tabletest.innerHTML += people[i].surname + ' ' + people[i].lastname;
    }

}

document.getElementById('btnTest').onclick = storage;