javascript - 在使用表单卸载 JavaScript 之前更新缓存

Question

我有一个由用户通过 JavaScript 更新的表单。事实上，用户可以动态添加一些字段。到目前为止，一切都进展顺利。假设我的表单有一个字段。用户再次添加该字段。他验证了它，他到达了一个带有表单结果的新页面，但随后意识到他做错了什么并返回(例如浏览器上一个按钮)。

表单仍显示为先前的输入，但仅包含一个字段。 (他用javascript添加的那个不再出现)我可以在提交表单后以某种方式更新缓存，这样如果用户返回，他可以看到他刚刚提交的同一个表单吗？

干杯!

Answer 1

每当您的代码更改表单时，您都应该调用一个将当前表单代码存储在 localStorage 中的函数。每当打开页面时，您都应该检查 localStorage 是否包含该信息，如果包含，请将表单代码设置为存储的代码。这不会更新浏览器的缓存，但会在客户端存储信息。

$(document).ready(function(){

    $("#something").click(function(e){
        e.preventDefault(); 
        // do stuff: add form elements, bla bla bla;
        updateStorage();
    });
    $("#clearStorage").click(function(e){
        e.preventDefault();
        localStorage.removeItem("theUsersPage");
    });

    function updateStorage(){
        var current;
        current = $("#container").html();

        localStorage.setItem("theUsersPage", current);
    }

    function loadFromStorage(){
        var old = localStorage.theUsersPage;
        if(old){
            $("#container").html(old);
        }
    }

    loadFromStorage();

});

jsfiddle:http://jsfiddle.net/JjxV8/1/