Question

我正在为一个简单的表单做localStorage。当用户打开表单时，所有保存的数据将显示在相应的输入字段中，用户填写表单后，将保存所有信息。

现在我可以保存数据并显示数据，只是当我重新打开页面时，数据会在页面无限刷新时显示。有谁知道这是怎么发生的？

以下是代码：

HTML：

<form id="formData">
<fieldset>
    <legend>Please fill in</legend>
    <label for="name">Name:</label>
    <input name="name" type="text"><br/>
    <label for="txt">Introduction:</label>
    <input name="txt" type="textarea"><br/>
    <label for="someCheck">Checkbox:</label>    
    <input name="someCheck" type="checkbox"><br/>
    <label for="someRadio">Radio:</label>   
    <input name="someRadio" type="radio"><br/>          
    <input type="submit">
</fieldset>

CSS：

fieldset{
    width: 50%;
    margin: 0 auto;
    padding: 5px 20px;
    box-sizing: border-box;
}
label{
    width: 18%;
    display: inline-block;
}
input{
    margin: 0;
    padding: 0;
}
input[type=submit]{
    padding: 2px 10px;
    outline: none;
    border-radius: 4px;
    margin: 6px 0;
    cursor: pointer;
}

Jquery的：

if(Modernizr.localstorage){
    var form=document.querySelector('#formData');
    if(localStorage.formData){
        //step one: 
        //display the stored value, title=my+title&...&
        var fd;
        fd=localStorage.formData.split('&'); //['title=my+title']
        $.each(fd,function(index,pair){
            pair=pair.split('=');//title,my+title
            console.log(pair[0]+":"+pair[1]);
            if(pair[1]==="on"){
                form[pair[0]].checked=true;
            }else{
                form[pair[0]].value=unescape(pair[1]).replace(/\+/g," ");               
            }
        });
    }
    //step two:
    //save form to storage when filled outline
    form.submit(function(e){
        //serialize form data to url
        localStorage.formData=$(this).serialize();
        alert('Okay, refresh the page now.');
        e.preventDefault();
    });

}

Answer 1

无限重新加载是由form.submit()引起的。这就是触发HTML提交操作。部分是重新加载页面。

我怀疑你真正想要的是听取提交事件并进行本地存储保存：

document.querySelector("#formData").addEventListener("submit", function(e){
    localStorage.formData=$(this).serialize();
    alert('Okay, refresh the page now.');
    e.preventDefault();
});

localStorage会导致页面无限刷新吗？

1 个答案: