使用javascript保存许多持久性配置值

问题描述

我创建了许多dropdown lists并可以正常工作。单击list title元素（在City上）时，它会opens或在下面显示其下拉菜单。 下面是一个说明，让您知道我的所有下拉列表是如何构成的。

<div class="dropdown-container">
 <div class="title">City </div> 
 <ul class="dropdown-menu" >
   <li class="glist_item">Calgary</li>
   <li class="glist_item">Miisssauga</li>
   <li class="glist_item">Winnipeg</li>
   <li class="glist_item">Vancouver</li>
   <li class="glist_item">Surrey</li>
 </ul> 
</div>

我的问题是页面重新加载后如何保存每个下拉列表的状态（opened或closed），以便打开或关闭的人在重新加载之前保持各自的状态。

注意：我之前尝试过localStorage或sessionStorage，但是由于列表的数量未定义，因此它们无法存储complex data或具有很多记录的数据。

因此，我需要持久的数据存储功能以及像 array 这样的功能来存储数据。 你可以帮我吗？

解决方法

您可以通过这种方式进行操作。只需创建一个包含列表状态信息的数组即可。

let states = {
  list1: "opened",list2: "opened",list3: "closed",list4: "opened",list5: "opened",}

在这里，我认为您可以将listx更改为列表ID。

您可以通过将其转换为字符串将其保存到localStorage。 然后，您可以从localStorage获取该字符串并将其解析为js对象，然后执行您要执行的操作。