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

您好，我在选择下拉列表中遇到问题。我正在尝试存储值，但它不起作用。 我已经看了其他问题，但运气不好

这是一把小提琴：

函数选择CSS（元素）{
常量a=element.options[element.selectedIndex].value；
document.getElementById（“change”）.onchange=function（）{
localStorage['colorPick']=element.options[element.selectedIndex].value；
}
window.onload=函数（）{
if（localStorage['colorPick']）
document.getElementById（“change”）.value=localStorage['colorPick']；
}
如果（a==“主题1”）{
document.body.style.background=“粉红色”；
}
如果（a==“主题2”）{
document.body.style.background=“蓝色”；
}
如果（a==“主题3”）{
document.body.style.background=“黄色”；
}
}

正文{
背景：粉红色；
}

主题1
主题2
主题3

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

localStorage.setItem（“colorPick”，element.options[element.selectedIndex].value）

使用getItem方法检索

---

让colorPick=localStorage.getItem（“colorPick”）

代码有几个问题：

如果

localStorage

中有项，则应设置

select

的值和

color

。这应该首先完成，而不是在函数内部完成

最好使用

else if

而不是将值比较三次

侦听器已经在

html

元素中设置了

onchange

，因此不应该在函数中声明它

您可以定义元素一次，然后一直使用它

您可以使用

select.value

获取所选值，其中select是本例中的

html

元素

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

let select=document.getElementById（“更改”）
if（localStorage['colorPick']）{
select.value=localStorage['colorPick']；
选择css（）；
}
函数selectCss（）{
常数a=选择值；
localStorage['colorPick']=a；
如果（a==“主题1”）{
document.body.style.background=“粉红色”；
}否则如果（a==“主题2”）{
document.body.style.background=“蓝色”；
}否则如果（a==“主题3”）{
document.body.style.background=“黄色”；
}
}

body{背景：粉色；}

主题1
主题2
主题3