Почему не создается ключ в indexedDB?

Question

[Павел Клешнин]

Разбираюсь с IndexedDB, делаю журнал изменений состояния девайсов. Почитал пару гайдов, в основном всё взял вот отсюда
Всё работало абсолютно нормально до тех пор, пока я не удалил базу. Теперь не создается ключ "logs", и постоянно вылезает ошибка

DataError: Data provided to an operation does not meet requirements.

Ставлю я autoIncrement: true, не ставлю, в любом случае не создается ключ. Понимаю, что проблема решается за минуту, но что поменять - не догоняю.

import vueStore from '../store';

export default function DB(newState) {
  let indexedDB = window.indexedDB;
  let req = indexedDB.open('logBook', 9);

  req.onerror = e => console.error('error', e.target);
  req.onupgradeneeded = e => {
    console.log('reqOnUpgradeneeded');
    let db = e.target.result;

    if (!db.objectStoreNames.contains('logBookStore')) {
      let objectStore = db.createObjectStore('logBookStore', { keyPath: 'logss' });
      objectStore.createIndex('logs', 'logs', {unique: true})
    }
  };
  req.onsuccess = e => {
    let db = e.target.result;

    let transaction = db.transaction('logBookStore', 'readwrite');
    let store = transaction.objectStore('logBookStore');

    let logs = store.get('logss');

    logs.onsuccess = function() {
      let res = logs.result;
      console.log(res) //Выводит undefined, т.к. данных нет
      if (!res) {
        store.add([newState], 'logs'); //DataError: Data provided to an operation does not meet requirements.
        vueStore.dispatch('SAVE_LOGS_BOOK', [newState]);
      } else {
        store.put([...res, newState], 'logs');
        vueStore.dispatch('SAVE_LOGS_BOOK', [...res, newState]);
      }
    };
    logs.onerror = function(e) {
      console.log("Error", e.target.error.name);
    };

    transaction.oncomplete = () => console.log('transaction completed');
  }
}

Answer 1

[Павел Клешнин]

В общем, вот рабочий вариант. Пару часов позабавлялся - и заработало.
Не будьте как я, не забывайте про версии БД и про keyPath

import vueStore from '../store';

export default function indexedDB(newState) {
  let indexedDB = window.indexedDB;
  let req = indexedDB.open('logBook', 1);
  req.onerror = e => console.error('error', e.target);
  req.onupgradeneeded = e => {
    console.log('reqOnUpgradeneeded');
    let db = e.target.result;

    if (!db.objectStoreNames.contains('logBookStore')) {
      let objectStore = db.createObjectStore('logBookStore');
      objectStore.createIndex('logs', 'logs', {unique: true})
    }
  };
  req.onsuccess = e => {
    let db = e.target.result;

    let transaction = db.transaction('logBookStore', 'readwrite');
    let store = transaction.objectStore('logBookStore');

    let logs = store.get('logs');

    logs.onsuccess = function() {
      let res = logs.result;
      console.log(res) //Выводит undefined, т.к. данных нет
      if (!res) {
        store.add([newState], 'logs'); //DataError: Data provided to an operation does not meet requirements.
        vueStore.dispatch('SAVE_LOGS_BOOK', [newState]);
      } else {
        store.put([...res, newState], 'logs');
        vueStore.dispatch('SAVE_LOGS_BOOK', [...res, newState]);
      }
    };
    logs.onerror = function(e) {
      console.log("Error", e.target.error.name);
    };

    transaction.oncomplete = () => console.log('transaction completed');
  }
}