0

请帮助，在尝试通过 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 每次用户点击提交时都会被重写，并带有新的输入值。而且我不知道如何在每次新提交时增加存储空间。请指教，如何解决这个问题？谢谢

4

2 回答 2

0

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

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

var dataToStore = JSON.stringify(inputArray);

然后你会使用

sessionStorage.setItem(myGeneratedId, dataToStore);

最后读取您的数据：

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

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

于 2015-08-31T14:34:07.573 回答
0

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

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

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

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

当你取回它时，使用 JSON.parse()

var dataArray=JSON.parse(SessionStorage.getItem('KeyName'));
于 2015-08-31T14:37:28.720 回答