Saving many persistents configurations values with javascript

Question

I have many dropdown lists which I created and work properly .When I click on its list title element (here on City ) it opens or shows its dropdown menu below . Below is an illustration to let you know how all my dropdown list are made .

<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>

My problem is how to save the state (opened or closed) of each dropdown list after the page reloads so that those who were opened or closed keep their respectives state before reload.

NB: I tried localStorage or sessionStorage before but these cannot store complex data or data with many records since the number of list is undefined .

So I need a persistent data storage capability as well as an ability to store data like array does . CAN YOU HELP ME ?

Answer 1

You can do it in this way. Just create an array includes information of lists states.

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

Here, I think you can change listx to list id.

You can save this to localStorage by converting it to string. Then, you can get that string from localStorage and parse it to js object and do what you are going to do.