SessionStorage问题，jQuery

Question

请帮助，在尝试通过sessionStorage存储数据时遇到困难

我有一个简单的表单，并希望从表单输入中读取数据，并将其附加到表中，并在会话期间将数据存储在表中。

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

问题是，只有最后一次提交被存储并显示在表中，而不是所有在会话期间执行的提交。

我想，每次用户单击submit并输入新值时，都会重新编写sessionStorage。我不知道如何增加每一个新提交文件的存储量。请提出建议，如何解决这个问题？谢谢

Answer 1

您提供的代码只需在会话存储中写入输入数组。如果要在会话存储中存储多个inputArrays，最好的方法是生成一个标识符，并序列化输入数组来存储它。

为数组生成标识符的方式取决于您。要序列化它，可以使用

var dataToStore = JSON.stringify(inputArray);

然后你就会用

sessionStorage.setItem(myGeneratedId, dataToStore);

最后，要读取您的数据：

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

由于JSON解析可能失败，所以try...catch是个好主意。

Answer 2

问题是:为什么要使用索引？sessionStorage是一个键值对象，使用它的最佳方法是设置适当的键，以便以后可以访问它。

sessionStorage.setValue('Key', 'Value');

如果要保存数组中的所有内容，则需要对其进行字符串化：

sessionStorage.setValue('KeyName' JSON.stringify(Data));

当您把它拿回来时，请使用JSON.parse()

var dataArray=JSON.parse(SessionStorage.getItem('KeyName'));