多个下拉菜单还记得它们的最后一个状态——jquery、cookie 还是 localStorage？答案

【问题标题】：Multiple dropdowns remember their last state- jquery, cookies or localStorage?多个下拉菜单还记得它们的最后一个状态——jquery、cookie 还是 localStorage？
【发布时间】：2015-07-06 18:11:13
【问题描述】：

我正在尝试将下拉菜单用于某些站点导航，并希望他们使用 jQuery cookie 或 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());
});

代码有效，但是否有更简洁、更简洁的方式来为其他几个下拉实例编写代码？

可以在此处查看工作演示：http://paulrand.design/_r@nd20i5/_template-article.html

我还想使用插件 SelectOrDie 来设置下拉菜单本身的样式，但似乎存在一些冲突 (http://vst.mn/selectordie/)。一个例子在这里：http://paulrand.design/_r@nd20i5/_template-list-with-thumbnails.html

【问题讨论】：

标签： jquery cookies drop-down-menu navigation local-storage

【解决方案1】：

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

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

另外，如果您的网站有登录名，并且您想让它独立于客户端，您可以使用 AJAX 将值存储在数据库中，并在每次选择触发 onChange 时写入它们。

无论哪种方式，您都必须在用户进行更改时将它们写入其他地方，然后在需要时或在页面加载时将它们全部读回。

【讨论】：