javascript在页面重新加载后保留值

Question

我有一个一般性问题。我有一个用 django 制作的表单，如果我使用提交，但并非所有数据都是正确的，或者当缺少必填字段时，页面会跳回默认值。表单内的值被保存，但页面布局不被保存。

我的改变布局的javascript:

$(function(){
    $('li.fields').slice(1).hide();

    $('ul').on('click', 'li.title', function(){
        $(this).next().slideToggle(200)
    })
});

简而言之，我想保留(未)折叠字段的状态。有人可以指出我实现这一目标的正确方向吗(javascript 新手)

Answer 1

如果您不会使用 AJAX(或不知道如何使用它)，您可以在表单中使用隐藏字段。

I've created a fiddle to simulate that .

HTML:

<input type="hidden" id="myHiddenField" />

更新的 Javascript:

$(function(){
    $('li.fields').slice(1).hide();

    $('ul').on('click', 'li.title', function(){
        $(this).next().slideToggle(200);
        var myString = "[ "; // create a string to simulate an Array
        $('ul li.title').each(function() {
            myString += $(this).is(":visible").toString() + ", "; // iterate your list to take the visible values
        });
        myString += " ]"; // finishes the Array
        $("#myHiddenField").val(myString); // populate your hidden field
    })

    // when you get back from a submit, this hidden field will have some values
    if ($("#myHiddenField").val() != "") {
        var arr = eval($("#myHiddenField").val()); // turn the string into an Array
        for (var i = 0; i < arr.length; i++) { // iterate the Array
            if (!arr[i])
                $("ul li.title").eq(i).hide(); // if the Array item is false, hide the respective li
        }
    }
});