How to modify data stored in chrome.storage

Question

I need this data structure

Two main objects containing nested objects

chrome.storage.sync.get(null, function(results) {
    console.log(results);                    // Output should be: {mainObject: {...}, mainObject2{...}}
    console.log(results.mainObject);         // Output should be: {object1: {...}, object2: {...}, object3: {...}} 
    console.log(results.mainObject.object1); // Output should be: {key: 'value', key: 'value'}
})

Example

Initialize an empty mainObject

chrome.storage.sync.set({mainObject: {}}, function() {
    console.log('MainObject Created');
});

Each time a browser event is triggered a new object should be added to mainObject

someBrowserEvent(function(name, eyeColor, hairColor) {
   name = {'eyeColor': eyeColor, 'haircolor': hairColor}

     // Code to add object to mainObject....
 
   chrome.storage.sync.get(['mainObject'], function(results) {
       console.log('results.mainObject');       // Desired output should be {emily: {...}}
       console.log('results.mainObject.emily'); // Desired output should be: {eyeColor: 'blue', hairColor: 'black'}
    })
}

My extension will not exceed 10 entries so I don't think a database would be optimal in this case

Values need to be stored after a chrome window has been closed

I found one solution to a similar problem (chrome sync storage to store and update array) in which a user suggested reading an existing value, appending a new value and then storing it back (overwriting). I'm wondering if there is a better solution.