SessionStorage issues, jQuery

Question

Please help, faced with difficulties while trying to store data via sessionStorage

I have a simple form and desire to read data from form inputs and append it to the table and store that data in the table during the session

HTML

Name: <input type="text" id="name"/>
Email: <input type="text" id="email"/>
Tel: <input type="text" id="tel"/>
Street: <input type="text" id="street"/>
City: <input type="text" id="city"/>
State: <input type="text" id="state"/>
Zip: <input type="text" id="zip"/>
<button  id="myForm" type="button">Add Costumer</button>

JS

    $(document).ready(function(){
            if(sessionStorage.length>0){
                display()
            }
    })


    $("#myForm").on("click", function(){

            save()

            $(":input").val(""); //clean fields of the form
    });


function save(){
            var name=      $("#name").val();
            var email=     $("#email").val();
            var telephone= $("#tel").val();
            var street=    $("#street").val();
            var city=      $("#city").val();
            var state=     $("#state").val();
            var zip=       $("#zip").val();


            var inputArray = [name, email, telephone, street, city, state, zip];

            for(i in inputArray){//storing input data
                sessionStorage.setItem(i, inputArray[i])
             };

            display()

}

function display(){
            var restoredName = sessionStorage.getItem(0);
            var restoredEmail = sessionStorage.getItem(1);
            var restoredTel = sessionStorage.getItem(2);
            var restoredStreet = sessionStorage.getItem(3);
            var restoredCity = sessionStorage.getItem(4);
            var restoredState = sessionStorage.getItem(5);
            var restoredZip = sessionStorage.getItem(6);


            //append filled information from the form to the table and 2 buttons - Update and Remove
            $("#listContent table").append( "<tr>" +                                          
                                      "<td>" + restoredName + "</td>"+ 
                                      "<td>" + restoredEmail + "</td>"+ 
                                      "<td>" + restoredTel + "</td>"+
                                      "<td>" + restoredStreet + "</td>"+ 
                                      "<td>" + restoredCity + "</td>"+ 
                                      "<td>" + restoredState + "</td>"+ 
                                      "<td>" + restoredZip + "</td>"+ 
                                      "<td>" + "<button>Update</button>" + "</td>" + 
                                      "<td>" + "<button>Remove</button>" + "</td>" + 
                                      "</tr>");
}

the issue is that only the last submit is stored and displayed in table, but not all submits that were performed during the session

I guess sessionStorage is rewrited every time user clicks submit with new input values. And I have no idea how to increase the storage with every new submit. Please advise, how to fix this issue? thanks

Answer 1

The code you gave just write the input array in session storage. If you want to store several inputArrays in session storage, the best way would be to generate an identifier, and to serialize your input array to store it.

The way you generate the identifier for your array is up to you. To serialize it, you could use

var dataToStore = JSON.stringify(inputArray);

Then you would use

sessionStorage.setItem(myGeneratedId, dataToStore);

Finally to read your data:

var myArraySerialized = sessionStorage.getItem(myGeneratedId);
var myArray = JSON.parse( myArraySerialized );

As JSON parse may fail it is a good idea to try...catch it.