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

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

我想每次用户单击带有新输入值的提交时，都会重写sessionStorage。 而且我不知道如何在每次新提交时增加存储量。 请告知，如何解决此问题？ 谢谢

Answer 1

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

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

var dataToStore = JSON.stringify(inputArray);

那你会用

sessionStorage.setItem(myGeneratedId, dataToStore);

最后读取您的数据：

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

由于JSON解析可能会失败，因此尝试...捕获它是一个好主意。

Answer 2

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

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

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

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

当您取回它时，请使用JSON.parse（）

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