带链接的下拉菜单：如何在localStorage中保存选中状态

问题分析 #

你之前的代码存在两个核心问题：

1. 第一段代码里有语法错误：localStorage('sort') 应该写成 localStorage.getItem('sort')
2. 选中选项后执行 window.location.reload() 只会刷新当前页面，无法跳转到选项对应的链接地址

正确实现方案 #

以下代码可实现两个核心需求：

• 选中下拉选项时，跳转到对应链接并将选中状态保存到localStorage
• 页面加载时自动恢复之前保存的选中状态（不会自动跳转，避免页面无限循环）

<html>
<head>
    <script>
        window.addEventListener('load', function() {
            const sortSelect = document.getElementById('sort');
            
            // 页面加载时恢复选中状态
            const savedSort = localStorage.getItem('sort');
            if (savedSort) {
                sortSelect.value = savedSort;
            }
            
            // 下拉框变更事件处理
            sortSelect.addEventListener('change', function() {
                const selectedValue = this.value;
                if (selectedValue) { // 跳过默认空选项
                    localStorage.setItem('sort', selectedValue);
                    // 跳转到选中的链接地址
                    window.location.href = selectedValue;
                }
            });
        });
    </script>
</head>
<body>
    <select id="sort"> 
        <option value="">Please choose…</option> 
        <option value="?sort[date_created]=ASC">Sort by Date (ASC)</option>
        <option value="?sort[date_created]=DESC">Sort by Date (DESC)</option>
        <option value="https://apple.com">Go to Apple</option>
        <option value="https://microsoft.com">Go to Microsoft</option>
    </select>
</body>
</html>

关键说明 #

• 用 window.location.href = selectedValue 替代 window.location.reload()，实现正常的链接跳转
• 页面加载仅恢复下拉框选中状态，不自动跳转，避免用户打开页面时被强制跳转
• 使用 addEventListener 绑定事件，符合现代JavaScript规范
• 增加非空判断，确保默认选项不会触发保存和跳转逻辑

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