多个下拉列表是否还记得它们的最后一个状态-jquery、cookie或localStorage？

我正在尝试使用下拉菜单进行一些站点导航，并希望他们使用jQuery cookies或localStorage记住上次选择的状态。但是，有些下拉列表有一个带有更多选项的辅助下拉列表

基本设置是：

form
    fieldset
        select.select_class#select-writing
            option(value='') Select
            option(value='books') Books
            option(value='articles') Articles
            option(value='quotes') Quotes
            option(value='suggested-readings') Suggested Readings

    fieldset.hide#select-writing-books
        select.select_class
            option(value='') Choose a book...
            option(value='thoughts') Thoughts on Design
            option(value='trademark') Trademark Design
            option(value='iKnow') I Know a Lot of Things
            option(value='sparkle') Sparkle and Spin
            option(value='trademarkSelection') The Trademarks of Paul Rand — A Selection
            option(value='little1') Little 1
            option(value='listen') Listen! Listen!

            button.hide#select-writing-books-button(href="#") Go

我的JS是：

$('#select-writing').change(function() {
    if ($(this).val() == "books") {
        $("#select-writing-books").show();
    } else {
        $("#select-writing-books").hide();
    }

    if ($(this).val() == "articles") {
        $("#select-writing-articles").show();
    } else {
        $("#select-writing-articles").hide();
    }

    if ($(this).val() == "quotes") {
        $("#select-writing-quotes").show();
    } else {
        $("#select-writing-quotes").hide();
    }

    if ($(this).val() == "suggested-readings") {
        $("#select-writing-suggested-readings").show();
    } else {
        $("#select-writing-suggested-readings").hide();
    }
});

如果有人选择了一个有第二个下拉列表的下拉列表，他们两个都会在刷新/重新访问时显示，等等

我已经尝试将jquery cookie插件与此代码一起使用，但第二个下拉列表没有出现：

if($.cookie('remember_select') != null) {
    // set the option to selected that corresponds to what the cookie is set to
    $('.select_class option[value="' + $.cookie('remember_select') + '"]').attr('selected', 'selected');
}

// when a new option is selected this is triggered
$('.select_class').change(function() {
    // new cookie is set when the option is changed
    $.cookie('remember_select', $('.select_class option:selected').val());
});

代码可以工作，但是有没有一种更干净、更简洁的方法来为其他几个下拉列表实例编写代码

可以在此处看到一个工作演示：

---

我还想使用plug-SelectOrDie来设置下拉列表本身的样式，但似乎存在一些冲突（）。这方面的一个例子是：

如果您希望跨不同的访问/重新加载进行存储，那么您需要一个不在客户端的存储系统，因为当您重新加载页面时，javascript基本上会从头开始

Cookie似乎是显而易见的选择，尽管本地存储也可以。基本上，你在正确的轨道上。Javascript中没有任何奇特的函数可以在页面重新加载之间记住变量的值。你必须把它存储在页面外的某个地方

另外，如果您的站点有一个登录名，并且您希望使其独立于客户端，那么可以使用AJAX将值存储在数据库中，每次select触发onChange时都写入这些值

无论哪种方式，当用户进行更改时，您都必须将它们写在其他地方，然后在需要时或在pageload上将它们全部读回