Javascript 隐藏的div在刷新中保持可见

我有一个简单的表单，当在select标记中选择category时，它将显示隐藏的div

我想要的是，当我刷新页面时，内容仍然可见，并且选中的项目仍然存在

下面是示例代码

HTML

<select class="form-control" name="food_type1" id="food_type1">
    <option selected="selected" disabled="disable" value="0">SELECT</option>
    <option value="1">Fruits</option>
    <option value="2">Meat</option>
</select>

<div id="food1" style="display: none;">
    <input type="checkbox" name="food1[]" value="Mango">Mango <br>
    <input type="checkbox" name="food1[]" value="strawberry">Strawberry
</div>

<div id="food2" style="display: none;">
    <input type="checkbox" name="food2[]" value="Beef">Beef <br>
    <input type="checkbox" name="food2[]" value="Pork">Pork <br>
    <input type="checkbox" name="food2[]" value="Chicken">Chicken
</div>

小提琴

---

您需要一种机制来记住状态，并在页面重新加载时动态设置它们。您可以在脚本中使用会话（如果您使用服务器语言生成页面）或cookie。这取决于您的场景。

您可以将服务器上的状态存储在数据库中。每当状态更改时，向后端发送更新，后端将存储状态并返回状态。您应该使用此状态填充表单

---

您可以在浏览器上使用HTML5本地存储来保留状态。但是，请确保每个用户都仔细处理此问题。每当页面重新加载时，从本地存储读取状态并填充表单。如果存在安全问题，请注意浏览器用户可以查看本地存储的内容。

最简单的方法是使用本地存储。我已经更新了您的fiddle，但是您将无法在JSFiddle中测试刷新，因此您必须在您的机器上本地尝试代码

JSFiddle:

您必须创建几个函数来实现它。我让它们尽可能简单，因此它们可能无法解决您的所有用例，但这将帮助您更接近您试图做的事情：

JS:

$(document).ready(function(){
    var storedItems = [];

    //Store selected items
    function storeItem(item) {
        storedItems.push(item);
        localStorage.setItem("storage", storedItems);
    }

    //Remove item
    function removeItem(item) {
        var index = storedItems.indexOf(item);
        storedItems.splice(index, 1);
    }

    //Show list according to Dropdown
    function showList(type) {
        var $food1 = $("#food1");
        var $food2 = $("#food2");

        localStorage.setItem("list", type);

        if ( type == '1') {
            $food1.show();
            $food2.hide();
        } else if ( type ==  '2') {
            $food2.show();
            $food1.hide();
        } else {
            $food1.hide();
            $food2.hide();
        }
    }

    //Get list type
    if (localStorage.getItem("list")) {
        showList(localStorage.getItem("list"));
    }

    //Get stored items
    if (localStorage.getItem("storage")) {
        storedItems = localStorage.getItem("storage");

        $.each(storedItems, function(i, val) {
            $('input[type="checkbox"][value="'+val+'"]').prop("checked", true);
        });
    }

    //Dropdown
    $('#food_type1').on('change', function() {
        showList(this.value);
    });

    //Checkbox
    $('input[type="checkbox"]').on('change', function() {
        var $this = $(this);
        if ($this.is(':checked')) {
            storeItem(this.val())
        } else {
            removeItem(this.val());
        }
    });
});

---

这就是刷新的目的：重置为初始状态。您必须将数据保存到某个地方（cookies、数据库…）。问题是我不知道如何实现LocalStorages。它非常简单，请检查这里的示例：您好，先生，如果有2个下拉菜单，它们是否会保持可见

$(document).ready(function(){
    var storedItems = [];

    //Store selected items
    function storeItem(item) {
        storedItems.push(item);
        localStorage.setItem("storage", storedItems);
    }

    //Remove item
    function removeItem(item) {
        var index = storedItems.indexOf(item);
        storedItems.splice(index, 1);
    }

    //Show list according to Dropdown
    function showList(type) {
        var $food1 = $("#food1");
        var $food2 = $("#food2");

        localStorage.setItem("list", type);

        if ( type == '1') {
            $food1.show();
            $food2.hide();
        } else if ( type ==  '2') {
            $food2.show();
            $food1.hide();
        } else {
            $food1.hide();
            $food2.hide();
        }
    }

    //Get list type
    if (localStorage.getItem("list")) {
        showList(localStorage.getItem("list"));
    }

    //Get stored items
    if (localStorage.getItem("storage")) {
        storedItems = localStorage.getItem("storage");

        $.each(storedItems, function(i, val) {
            $('input[type="checkbox"][value="'+val+'"]').prop("checked", true);
        });
    }

    //Dropdown
    $('#food_type1').on('change', function() {
        showList(this.value);
    });

    //Checkbox
    $('input[type="checkbox"]').on('change', function() {
        var $this = $(this);
        if ($this.is(':checked')) {
            storeItem(this.val())
        } else {
            removeItem(this.val());
        }
    });
});