title: Can I store javascript class objects in indexed database?
body: <p>I created a class called Book with a constructor and some methods.</p>
  
  <pre><code>class Book {
      constructor(title, author) {
          this.title = title;
          this.author = author;
      }
  
      displayInfo() {
          console.log(`Title: ${this.title}, Author: ${this.author}`);
      }
  }
  </code></pre>
  
  <p>Then I created a bunch of Book objects and I put them in an array called Library.</p>
  
  <pre><code>const book1 = new Book('Hobbit', 'JRR Tolkien');
  const book2 = new Book('Mistborn', 'Brandon Sanderson');
  
  let library = [];
  library.push(book1);
  library.push(book2);
  
  console.log(library);
  library.forEach(book =&gt; book.displayInfo());
  </code></pre>
  
  <p>Then I stored this Library array in indexeddb.</p>
  
  <pre><code>if (!window.indexedDB) {
      window.alert("IndexedDB doesn't work");
  }
  
  let request = indexedDB.open("Database", 1);
  let db, tx, store;
  request.onupgradeneeded = function(e) {
  let db = request.result;
  let store = db.createObjectStore('Collection', { keyPath: 'type' });
  };
  request.onerror = function(e) {
      console.log('error ' + e.target.errorCode);
  };
  request.onsuccess = function(e) {
      db = request.result;
      tx = db.transaction('Collection', 'readwrite');
      store = tx.objectStore('Collection');
  
      db.onerror = function(e) {
          console.log('error ' + e.target.errorCode);
      };
      console.log('adding do collection db');
      store.put({ type: 'library', data: library });
  
      tx.oncomplete = function() {
          db.close();
      };
  };
  </code></pre>
  
  <p>Now I would like to restore this array after every page refresh and run Book methods on objects stored in the array. But when I restored data I saw that my Book objects are no longer Book objects, just regular objects so I can't use Book methods on them.</p>
  
  <pre><code>if (!window.indexedDB) {
      window.alert("IndexedDB doesn't work");
  }
  
  let request = indexedDB.open("Database", 1);
  let db, tx, store;
  request.onupgradeneeded = function(e) {
      console.log('upgrading');
      let db = request.result;
      let store = db.createObjectStore('Collection', { keyPath: 'type' });
  };
  request.onerror = function(e) { console.log('error ' + e.target.errorCode); };
  request.onsuccess = function(e) {
      console.log('success');
      db = request.result;
      tx = db.transaction('Collection', 'readwrite');
      store = tx.objectStore('Collection');
  
      db.onerror = function(e) { console.log('error ' + e.target.errorCode); };
  
      let retrievedData = store.get('library');
  
      retrievedData.onsuccess = function(e) {
          if (retrievedData.result) console.log(retrievedData);
          if (retrievedData.result) library = retrievedData.result.data;
  
          console.log(library);
          library.forEach(book =&gt; book.displayInfo());
      }
  
      tx.oncomplete = function() {
          db.close();
      };
  };
  </code></pre>
  
  <p>Is there a solution to this problem?</p>
  
  <p>Best regards,
  Oskar</p>