SessionStorage问题,存储多个数据

时间:2015-09-01 02:36:43

标签: jquery html sessionstorage

我有一个应用程序,它从输入字段中收集数据并将其附加到表中。请参阅下面的代码。我做错了什么?

      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);
};

虽然控制台说没有定义uniqueID,但我不明白为什么。当我使用任何其他变量 - 名称,电子邮件,街道等 - 它通过了,uniqueID - no。我究竟做错了什么?谢谢你的帮助

1 个答案:

答案 0 :(得分:0)

而不是:

var ID = function () 

做的:

function ID()

否则你将无法调用它,因为在js读取你试图调用它的代码时,变量将是未定义的。

要理解两个函数声明之间的区别,请参阅此question

另请注意,var uniqueID = ID();在函数save的范围内声明,因此display将无法看到它,也许您应该将其作为参数传递:

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

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

为了避免混淆,以下是完整代码的样子:

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);
};