Menu 本地存储-单独选择

“有关于js localstorage的优化建议吗？”

$（函数（）{
$（'#selection1'）。更改（函数（）{
localStorage.setItem（'todoData'，this.value）；
});
if（localStorage.getItem（'todoData'））{
$（'#selection1'）.val（localStorage.getItem（'todoData'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection2'）。更改（函数（）{
localStorage.setItem（'todoData2'，this.value）；
});
if（localStorage.getItem（'todoData2'））{
$（'#selection2'）.val（localStorage.getItem（'todoData2'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection3'）。更改（函数（）{
localStorage.setItem（'todoData3'，this.value）；
});
if（localStorage.getItem（'todoData3'））{
$（'#selection3'）.val（localStorage.getItem（'todoData3'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection4'）。更改（函数（）{
localStorage.setItem（'todoData4'，this.value）；
});
if（localStorage.getItem（'todoData4'））{
$（'#selection4'）.val（localStorage.getItem（'todoData4'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection5'）。更改（函数（）{
localStorage.setItem（'todoData5'，this.value）；
});
if（localStorage.getItem（'todoData5'））{
$（'#selection5'）.val（localStorage.getItem（'todoData5'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection6'）。更改（函数（）{
localStorage.setItem（'todoData6'，this.value）；
});
if（localStorage.getItem（'todoData6'））{
$（'#selection6'）.val（localStorage.getItem（'todoData6'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection7'）。更改（函数（）{
localStorage.setItem（'todoData7'，this.value）；
});
if（localStorage.getItem（'todoData7'））{
$（'#selection7'）.val（localStorage.getItem（'todoData7'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection8'）。更改（函数（）{
localStorage.setItem（'todoData8'，this.value）；
});
if（localStorage.getItem（'todoData8'））{
$（'#selection8'）.val（localStorage.getItem（'todoData8'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection9'）。更改（函数（）{
localStorage.setItem（'todoData9'，this.value）；
});
if（localStorage.getItem（'todoData9'））{
$（'#selection9'）.val（localStorage.getItem（'todoData9'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection10'）。更改（函数（）{
localStorage.setItem（'todoData10'，this.value）；
});
if（localStorage.getItem（'todoData10'））{
$（'#selection10'）.val（localStorage.getItem（'todoData10'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection11'）。更改（函数（）{
localStorage.setItem（'todoData11'，this.value）；
});
if（localStorage.getItem（'todoData11'））{
$（'#selection11'）.val（localStorage.getItem（'todoData11'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection12'）。更改（函数（）{
localStorage.setItem（'todoData12'，this.value）；
});
if（localStorage.getItem（'todoData12'））{
$（'#selection12'）.val（localStorage.getItem（'todoData12'））.trigger（'change'）；
}
});
$（函数（）{
$（'#selection13'）。更改（函数（）{
localStorage.setItem（'todoData13'，this.value）；
});
if（localStorage.getItem（'todoData13'））{
$（'#selection13'）.val（localStorage.getItem（'todoData13'））.trigger（'change'）；
}
});

1.
2.
3.



4.
5.
6.



7.
8.
9



10
11
12



13
14
15



16
17
18



19
20
21



22
23
24



25
26
27



28
29
30



31
32
33



34
35
36



37
38
39


本地存储基本上是一种键值存储，有关更多信息，请阅读以下内容：

//假设您有一个清晰的本地存储。。。
localStorage.getItem（'score'）/>null
//第一个setItem将创建一个新条目
localStorage.setItem（'score'，5）
localStorage.getItem（'score'）/>5
//同一密钥上的任何下一个设置项都将覆盖数据
localStorage.setItem（'score'，10）
localStorage.getItem（'score'）/>10

因此，如果要将两个下拉列表分别保存，则必须使用不同的名称，例如

//选择1
localStorage.setItem（'todoData1'，this.value）；
getItem（'todoData1'）；
//选择2
localStorage.setItem（'todoData2'，this.value）；
getItem（'todoData2'）；

编辑：（问题更改后）

要为选择列表实现这一点，您可能更喜欢使用循环声明：

$（函数（）{
for（设i=0；i<13；i++）{
const storageName=`todoData${i}`；
const selectionId=`#selection${i}`；
$（selectionId）.更改（函数（）{
setItem（storageName，this.value）；
});
//最初保存数据的步骤
如果（！localStorage.getItem（storageName））{
$（selectionId）.trigger（'change'）；
}
}
});
感谢leun4m的回复。对当前JS本地存储有什么优化建议吗？如果回答了您的问题，请考虑将它标记为您接受的答案。当我添加行“”时，它不会在退出时保存，但只有会话处于活动状态。它似乎不喜欢CSS，但我需要它来设计。样式表不应该改变任何东西，当我尝试时，它没有改变：谢谢@leun4m的输入。我很感激。问题似乎出在“Firefox”上的“Microsoft Edge”浏览器上“一切都很有效。你的例子很大，但第四、第五。。。选择不会更改与您的问题有关的任何内容。因为你是新手，所以建议你：尽量减少你的例子，不要忘记社区应该知道的任何细节。顺便说一句，

没有结尾标记