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

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

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

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

SessionStorage问题，jQuery

2 个答案: