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 ?

Can you show us how you use the `localStorage` or `sessionStorage`? — Thum Choon Tat, Oct 19 '20 at 02:44
I don' t have problem using localStorage . The issue is to store data in this storage like array does . May be to achieve , by using localStorage before setting value I should convert array into string type with JSON.stringify method and later into Array .@ThumChoonTat — GNETO DOMINIQUE, Oct 19 '20 at 02:58
Apologies for misunderstanding your question, does [this](https://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values) answer your question? — Thum Choon Tat, Oct 19 '20 at 03:00
LocalStorage can deal with complex data, you just need to serialize it properly. A json object can be serialized to a string by `JSON.stringify()`. Then it can be revived back to json object by `JSON.parse` simple as that. — hackape, Oct 19 '20 at 03:22

score 0 · Answer 1 · answered Oct 19 '20 at 03:17

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.

Saving many persistents configurations values with javascript

1 Answers1