如何让JavaScript记住用户下拉列表选择？开发需考虑哪些要点

要让下拉列表记住用户的选择，你需要关注这几个关键环节：

• 选对存储方案：前端场景下优先用localStorage，它能持久化保存数据（关闭浏览器再打开也不会丢）；如果只需要会话内记忆，就用sessionStorage。要是需要和后端同步，再考虑cookie或者后端数据库存储。
• 及时保存状态：用户每次切换下拉选项时，立刻把选中的值存到存储里，别等页面刷新才存。
• 页面加载时恢复状态：页面刚打开的时候，要先去读取存储的历史选择，然后把下拉框还原到之前的选中状态，还要注意联动第二个下拉的选项（比如你选了Office，得先加载Office对应的城市列表，再选中之前选的那个城市）。
• 处理异常情况：比如用户第一次访问（没有存储数据），或者存储的选项已经不在当前下拉列表里了（比如后续你更新了选项），这时候要做降级处理，比如默认显示空选项或者第一个有效选项。

我给你修改了代码，加入了选择记忆的逻辑，你可以直接用：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function($) {
    var locations = {
        'Office': [ 'Rome','Milano', 'New York', 'Portland', 'Paris', 'San Francisco'],
        'Country': [ 'CA', 'FR', 'IT', 'US'],
    }
    var $attribute = $('#attribute');
    var $locations = $('#element');

    // 页面加载时恢复之前的选择
    function restoreSelection() {
        var savedAttr = localStorage.getItem('selectedAttribute');
        var savedElem = localStorage.getItem('selectedElement');
        
        if (savedAttr) {
            // 设置第一个下拉的选中值
            $attribute.val(savedAttr);
            // 触发change事件加载对应的第二个下拉选项
            $attribute.trigger('change');
            // 等选项加载完成后，设置第二个下拉的选中值
            setTimeout(function() {
                if (savedElem) {
                    $locations.val(savedElem);
                }
            }, 0);
        }
    }

    // 第一个下拉的change事件
    $attribute.change(function () {
        var attribute = $(this).val(),
            lcns = locations[attribute] || [];
        
        var html = $.map(lcns, function(lcn){
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        
        $locations.html(html);
        // 保存第一个下拉的选择
        localStorage.setItem('selectedAttribute', attribute);
        // 清除之前保存的第二个下拉选择（因为切换分类后之前的元素可能不存在了）
        localStorage.removeItem('selectedElement');
    });

    // 第二个下拉的change事件，保存选择
    $locations.change(function() {
        var selectedElem = $(this).val();
        localStorage.setItem('selectedElement', selectedElem);
    });

    // 页面初始化时恢复状态
    restoreSelection();
});
</script>
</head>
<body>
<label class="page1">Attribute</label>
<div class="tooltips" title="Please select the attribute that the customer will primarily be served from">
    <select id="attribute" name="attribute" placeholder="Phantasyland">
        <option></option>
        <option>Office</option>
        <option>Country</option>
    </select>
</div>
<br />
<br />
<label class="page1">List of elements</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
    <select id="element" name="element" placeholder="Anycity"></select>
</div>
</body>
</html>

• 新增了restoreSelection函数，页面加载时读取localStorage里的历史选择，还原下拉框状态。
• 在第一个下拉的change事件里，保存选中的attribute，同时清除之前的element存储（因为切换分类后之前的元素可能不在新列表里了）。
• 给第二个下拉添加了change事件，保存选中的element值。
• 用setTimeout确保第二个下拉的选项加载完成后再设置选中值，避免因为DOM更新延迟导致设置失败。

内容的提问来源于stack exchange，提问作者user5921883