Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

See the Browser Extension Development in Action column for this series of articles

TagDown is an open source bookmark management plug-in that allows you to view, add, and modify bookmarks using the extension. It also allows you to export bookmarks in different ways.

In addition to the usual bookmark management features, it also has the following features:

  • Support 🎬newBookmark and attach additional information, for exampletags,groups 等
  • Support 🎬exportAny bookmark isjsonThe document
  • Browse the hierarchical bookmark data as a 🎬 tree
  • Open multiple bookmarks in one click. You can open bookmarks in 🎬 TAB group

Although most IndexedDB operations are asynchronous, methods do not return promises, but instead handle the results of operations in a manner that calls back on listening events, making development tedious and the code difficult to maintain.

To facilitate the development of a library called Dexie.js, it rewraps the IndexedDB APIs to make calling IndexedDB easier. Most of the library’s methods are asynchronous and return promises.

Like IndexedDB, it has different concepts, and different classes encapsulate different methods

  • DexieThe core class of the library, which is instantiated to create/connect an IndexedDB database
  • The Table class represents the ObjectStore
  • Collection this class represents a subset of the data items in the object library and can be understood as the query results of the data
// src/
// instantiate a database
const db = new Dexie('tagdown');
// Declare versions and data structures (object libraries)
db.version(1).stores({
  // Create 3 object libraries. The key is the name of the object library, and the value is the key and index of the data item in the object library, separated by commas
  bookmark: 'id, *tags, *groups'.// The first is to specify the attributes to be used as keys, followed by the index
  // The asterisk * indicates that the corresponding attribute value of the data is an array, and each element of the array is indexed
  share: 'id, share'.star: 'id, star'});// Open/create the database asynchronously
db.open().then((database) = > {
  app.provide('db', database); // Provide database objects to other application components by means of provid-inject
  app.mount('#app');
}).catch((err) = > {
  // Error occurred
  console.log(err);
});
Copy the code

💡 According to the official operation guide, you do not need to check whether a database with the same name exists in the browser. Dexie automatically determines whether to open an existing database or create a new database each time you attempt to connect to a database.

Listed below are some of the main methods related to databases in a project

// src/composables/useBookmark.js
// ...
const db = inject('db');

// Query data based on key id
const getBookmarkDB = async (id) => {
  const bookmark = await db.bookmark.get(id);
  return bookmark;
};

// Add data to the Bookmark object library
const setBookmarkDB = async (id, bookmark) => {
  // console.log(bookmark);
  await db.bookmark.put({
    id,
    title: bookmark.title,
    url: bookmark.url,
    faviconUrl: bookmark.faviconUrl,
    tags: bookmark.tags,
    groups: bookmark.groups,
    description: bookmark.description,
  });
};

// Delete data based on key ID
const deleteBookmarkDB = async (id) => {
  await db.bookmark.delete(id);
};
Copy the code

Gets all the values of the index

// src/options/App.vue // ... const db = inject('db'); OnMounted (async () => {allTags. Value = await db.bookmark.orderby ('tags').uniqueKeys(); });Copy the code

Use the WHERE query statement

// src/options/App.vue // ... const db = inject('db'); // Index share = 1 And returns an array of the data's keys const getShareableIds = async () => {const result = await db.share.where('share').equals(1).primaryKeys(); return result; };Copy the code

Convert the query result to an array

// src/popup/components/BrowserPage.vue
// ...
const db = inject('db');
const starNodes = await db.star.where({ star: 1 }).toArray();
Copy the code

Import and export the IndexedDB database

// src/options/App.vue // ... import { importDB, exportDB, importInto, peakImportFile, } from 'dexie-export-import'; / /... // Export database as blob blob = await exportDB(db, {prettyJson: true,}); / /... // import database await importInto(db, file, {overwriteValues: true,}). Then (() => {console.log('import database successful! '); }).catch((err) => { console.log(err); });Copy the code