My current storage system looks like this, because I'm using localStorage:

let storage = {
"SETTING: dataTracking?": false,
"NOTIFICATIONSTATUS: welcome": 'viewed',
"logoClickCount": 0,
"SETTING: soundEffects?": true,
"NOTIFICATIONSTATUS: covid-19": 'viewed'

}

It's super messy and is not intuitive to read when writing code that needs to access the data. For example, I employed the convention of declaring what category an attribute is in by writing "SETTING: foo" or "NOTIFICATIONSTATUS: foo" in order to not have duplicates and keep a clean storage namespace. What I would like to do is this:

let optimalStorage = {
  "logoClickCount": 0,
  "settings": {"dataTracking?":false,"soundEffects?": true},
  "notificationsAlreadySeen": {"welcome":true,"covid-19":false}

}

This would be much better, but localStorage doesn't support that. I wanted to try to try perhaps using indexedDB to simply be able to store this storage object, so that when writing code that needs to pull from the memory I could cleanly do something like

if (optimalStorage['settings']['soundEffects?']) {
   playSound("/music/1.ogg");
}

Ideally, the entire object would not be fetched, only the data value. That way, when I create another branch of storage for several user generated images (data uris), it doesn't need to worry about fetching several megabytes of data each time I want to see if the sound effect option is enabled.

I'm starting to get the feeling that indexedDB is needlessly complex for what I'm trying to accomplish because I haven't been able to understand it at all. Is there a middle ground between localStorage and indexedDB? If not, is there a more simplistic version of indexedDB that just stores one big object for easy and quick access?