SessionStorage 问题，jQuery

Question

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

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

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

问题是 table 中仅存储和显示了最后一次提交，而不是会话期间执行的所有提交

我猜每次用户使用新输入值单击提交时都会重写 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

SessionStorage issues, jQuery

javascript

jquery

sessionstorage