下拉 select 重新加载时重新加载到第一个选项

Question

您好，我在使用 select 下拉菜单时遇到问题。 我正在尝试存储该值，但它不起作用。 我已经看过其他问题了，但没有运气。

这是一个小提琴：

 function selectCss(element) { const a = element.options[element.selectedIndex].value; document.getElementById("change").onchange = function() { localStorage['colorPick'] = element.options[element.selectedIndex].value; } window.onload = function() { if (localStorage['colorPick']) document.getElementById("change").value = localStorage['colorPick']; } if (a == "Theme 1") { document.body.style.background = "pink"; } if (a == "Theme 2") { document.body.style.background = "blue"; } if (a == "Theme 3") { document.body.style.background = "yellow"; } }

 body { background: pink; }

 <select id="change" name="colorPick" onchange="selectCss(this)"> <option selected value="Theme 1">Theme 1</option> <option value="Theme 2">Theme 2</option> <option value="Theme 3">Theme 3</option> </select>

Answer 1

代码有几个问题：

1. 如果localStorage中有项目，则应设置select的值和color 。 这应该首先完成，而不是在 function 内完成。
2. 最好使用else-if而不是将值比较三遍。
3. 监听器已在html元素中设置onchange ，因此不应在 function 中声明它。
4. 您可以定义一次元素并一直使用它。
5. 您可以使用select.value获取所选值，其中 select 是此示例中的html元素

经过适当修改的工作解决方案如下：

 let select = document.getElementById("change") if (localStorage['colorPick']){ select.value = localStorage['colorPick']; selectCss(); } function selectCss() { const a = select.value; localStorage['colorPick'] = a; if (a == "Theme 1") { document.body.style.background = "pink"; }else if (a == "Theme 2") { document.body.style.background = "blue"; }else if (a == "Theme 3") { document.body.style.background = "yellow"; } }

 body {background: pink;}

 <select id="change" name="colorPick" onchange="selectCss()"> <option selected value="Theme 1">Theme 1</option> <option value="Theme 2">Theme 2</option> <option value="Theme 3">Theme 3</option> </select>

Answer 2

使用 setItem 方法来存储到本地存储。

localStorage.setItem("colorPick", element.options[element.selectedIndex].value);

使用 getItem 方法检索

让 colorPick = localStorage.getItem("colorPick")