SessionStorage issue, storing multiply data

Question

I have an app which collects data from input fields and appends it to the table. Please see my code below. What am I doing wrong?

      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];

                var dataToStore = JSON.stringify(inputArray);

                var uniqueID = ID();

                sessionStorage.setItem(uniqueID, dataToStore);

                display();


    };


function display(){

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

     var restoredName = myArray[0];
     var restoredEmail = myArray[1];
     var restoredTel = myArray[2];
     var restoredStreet = myArray[3];
     var restoredCity = myArray[4];
     var restoredState = myArray[5];
     var restoredZip = myArray[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>");
    }                       

var ID = function () {

  return '_' + Math.random().toString(36).substr(2, 9);
};

Though console says that uniqueID is not defined, and I do not understand why. When I use any other variable - name, email, street etc. - it passed, uniqueID - no. What am I doing wrong? Thanks for help

score 0 · Answer 1 · edited May 23 '17 at 11:43

instead of:

var ID = function ()

do:

function ID()

otherwise you won't be able to call it because the variable will be undefined at the time js reads the code where you are trying to invoke it.

to understand the difference between both function declarations see this question.

Also note that var uniqueID = ID(); is declared inside the scope of the function save so display will not be able to see it, maybe you should pass it as parameter:

//...
display(uniqueID);
//...

//...
function display (uniqueID) {
//...

In order to avoid confusions, here is what the full code would look like:

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];
    var dataToStore = JSON.stringify(inputArray);
    var uniqueID = ID();
    sessionStorage.setItem(uniqueID, dataToStore);
    display(uniqueID);
};


function display(uniqueID) {
    var myArraySerialized = sessionStorage.getItem(uniqueID);
    var myArray = JSON.parse(myArraySerialized);
    var restoredName = myArray[0];
    var restoredEmail = myArray[1];
    var restoredTel = myArray[2];
    var restoredStreet = myArray[3];
    var restoredCity = myArray[4];
    var restoredState = myArray[5];
    var restoredZip = myArray[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>"
    );
}

function ID() {
    return '_' + Math.random().toString(36).substr(2, 9);
};

var uniqueID = ID(), yes, this variable is diclared inside another function, and it is seen only inside this function, but I used this key to set an array within sessionStorage, thus uniqueID should be assosiated with SessionStorage and be reusable within other functions, but not — Ievgen Chernetsov, Sep 01 '15 at 06:57
that's what i'm trying to explain in my answer, the variable uniqueID cannot be seen from the function you want to retrieve data from sessionStorage, you need to pass it to the display function somehow. — taxicala, Sep 01 '15 at 14:20

SessionStorage issue, storing multiply data

1 Answers1