How to add to an already existing array in chrome storage?

Question

I'm working with chrome storage for the first time and am having a hard time adding data to an already existing array. I'm attempting to save die roll values so that the keys in the stored object are die types (4, 6, 8, etc.) and the values are arrays of die rolls.

Here's my code:

let storage = chrome.storage.local;
let json = [];
chrome.storage.local.set({4: [1,2,3]}, function() {
    console.log('value saved');
    chrome.storage.local.get('4', function(response){
        console.log(response['4']);
    })
});
storage.set({6: []});
storage.set({8: []});
storage.set({10: []});
storage.set({20: []});

let button = document.getElementById('submit');

button.addEventListener('click', event => {
    let dieType = document.querySelector('#dieType');
    console.log(dieType);
    let dieValue = document.querySelector('#rollValue');
    console.log(dieType.value, rollValue.value);

    // get existing data
    storage.get(dieType.value, function(existing) {
        console.log(existing[`${dieType.value}`]);
        let die = dieType.value
        let rolls = existing[`${dieType.value}`];
        console.log(rolls);
        let newArray = [];
        //If no existing data, create an array
        //if existing is empty (false) then create an array
        //if existing is not empty(true) then split
        if (existing[`${dieType.value}`] === undefined) {
            console.log('no data stored for die type')
        } else {
            for(items in rolls) {
                newArray.push(rolls[items]);
            }
        }
        console.log(newArray);
        newArray.push(Number(rollValue.value));
        //save back to storage
        console.log(existing);
        storage.set({die: newArray}, function(result){
            console.log(`${die}: ${newArray} saved`);
            chrome.storage.local.get(die, function(response){
                console.log(response.die);
            })
        });
    });

The console output is:

value saved
Array(3)
<select id=​"dieType" name=​"dieType" class=​"select-field">​<option value=​"null">​Please Choose One...​</option>​<option value=​"4">​D4​</option>​<option value=​"6">​D6​</option>​<option value=​"8">​D8​</option>​<option value=​"10">​D10​</option>​<option value=​"20">​D20​</option>​</select>​
 4 4 n
(3) [1, 2, 3]0: 11: 22: 3length: 3__proto__: Array(0)
(3) [1, 2, 3]

(3) [1, 2, 3]
{4: Array(3)}4: (3) [1, 2, 3]__proto__: Object
4: 1,2,3,4 saved
undefined

It seems to me like I haven't actually saved an array back to local storage, and that the array doesn't have the new value. I'm very new at this, so I probably am not understanding exactly how data is represented in chrome storage.

Answer 1

To use a variable as a key in a literal object, use {[key]: value} syntax.

Use array spread to extend an array.

Let's simplify the code like this:

const storage = chrome.storage.local;
storage.set({
  4: [1, 2, 3],
  6: [],
  8: [],
  10: [],
  20: [],
});

document.getElementById('submit').onclick = e => {
  e.preventDefault();
  let type = document.querySelector('#dieType').value;
  let value = Number(document.querySelector('#rollValue').value);
  storage.get(type, data => {
    storage.set({
      [type]: [
        ...data[type] || [],
        value,
      ],
    });
  });
};