页面重新加载后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
        }
    }
});