Как добавить в уже существующий массив в chrome хранилище? - PullRequest
Новая
       54

Как добавить в уже существующий массив в chrome хранилище?

0 голосов
/ 21 марта 2020

Я работаю с chrome хранилищем впервые и с трудом добавляю данные в уже существующий массив. Я пытаюсь сохранить значения d ie roll, чтобы ключи в сохраненном объекте были d ie типов (4, 6, 8, et c.), А значения - это массивы d ie roll ,

Вот мой код: 

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);
            })
        });
    });

Вывод на консоль: 

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

Мне кажется, что я на самом деле не сохранил массив обратно в локальное хранилище и что массив не имеет нового значения. Я очень новичок в этом, поэтому я, вероятно, не понимаю, как именно данные представлены в chrome хранилище.

1 Ответ

0 голосов
/ 21 марта 2020

Чтобы использовать переменную в качестве ключа в литеральном объекте, используйте синтаксис {[key]: value}.

Используйте расширение массива для расширения массива.

Давайте упростим код, подобный этому: 

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,
      ],
    });
  });
};
...